Skip to content

Commit 47e6cd0

Browse files
mythzmythz
committed
Add ReactCopilotTemplates
1 parent ee8a645 commit 47e6cd0

File tree

2 files changed

+112
-0
lines changed

2 files changed

+112
-0
lines changed

‎MyApp/Pages/React/Index.cshtml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -549,6 +549,7 @@ import { ref, computed } from "vue"
549549
import Templates, { template } from "/posts/components/Templates.mjs"
550550
import ScreenshotsGallery from "/posts/components/ScreenshotsGallery.mjs"
551551
import ReactCallout from "/pages/components/ReactCallout.mjs"
552+
import ReactCopilotTemplates from "/pages/components/ReactCopilotTemplates.mjs"
552553
553554
export const Index = [
554555
template('react-vite', 'React Vite', 'ReactNative',['empty', 'tailwind']),
@@ -562,11 +563,14 @@ const App = {
562563
Templates,
563564
ScreenshotsGallery,
564565
ReactCallout,
566+
ReactCopilotTemplates,
565567
},
566568
template: `
567569
<div class="max-w-screen-lg">
568570
<Templates :templates="[Index['react-vite'],Index['nextjs'],Index['react-spa']]" />
569571
572+
<ReactCopilotTemplates class="mt-12" />
573+
570574
<h2 class="mb-20 mt-20 text-center text-3xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight text-gray-900 dark:text-gray-100">
571575
Screenshots
572576
</h2>

‎MyApp/wwwroot/pages/components/ReactCopilotTemplates.mjs‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import Icons from '../../posts/components/Icons.mjs'
2+
3+
export default {
4+
name: 'ProjectTemplateSelector',
5+
data() {
6+
return {
7+
templates: [
8+
{
9+
id: 'vite',
10+
name: 'React Vite',
11+
description: 'Lightweight, fast development environment. Best for pure client-side apps.',
12+
url: 'https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates',
13+
// Tailwind Colors
14+
colorBg: 'bg-blue-500',
15+
colorText: 'text-blue-500',
16+
hoverBorder: 'group-hover:border-blue-500/50',
17+
hoverText: 'group-hover:text-blue-600',
18+
iconXml: Icons.ReactNative,
19+
},
20+
{
21+
id: 'next',
22+
name: 'Next.js React',
23+
description: 'Full-stack React framework with SSR, API routes, and SEO optimization built-in.',
24+
url: 'https://github.com/new?template_name=nextjs&template_owner=NetCoreTemplates',
25+
// Tailwind Colors
26+
colorBg: 'bg-slate-900',
27+
colorText: 'text-slate-900',
28+
hoverBorder: 'group-hover:border-slate-900/50',
29+
hoverText: 'group-hover:text-slate-900',
30+
iconXml: Icons.NextjsNative,
31+
},
32+
]
33+
}
34+
},
35+
template: `
36+
<div class="max-w-5xl mx-auto px-6 py-12 font-sans">
37+
<!-- Header Section -->
38+
<div class="text-center mb-12 space-y-4">
39+
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-600 text-xs font-medium uppercase tracking-wide">
40+
<svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
41+
<path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path>
42+
</svg>
43+
GitHub Copilot Ready
44+
</div>
45+
<h2 class="text-4xl font-extrabold text-slate-900 tracking-tight">
46+
Jumpstart your project with Copilot
47+
</h2>
48+
<p class="text-lg text-slate-600 max-w-2xl mx-auto">
49+
Select a React .NET template to instantly generate a new repository and with Copilot assistance.
50+
Tell Copilot what you want to build. After creation, Copilot will open a pull request with generated files.
51+
</p>
52+
</div>
53+
54+
<!-- Grid Section -->
55+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
56+
<a
57+
v-for="template in templates"
58+
:key="template.id"
59+
:href="template.url"
60+
rel="noopener noreferrer"
61+
class="group relative flex flex-col bg-white rounded-2xl p-6 border border-slate-200 shadow-sm hover:shadow-xl transition-all duration-300 ease-out hover:-translate-y-1"
62+
:class="template.hoverBorder"
63+
>
64+
<!-- Top Decoration Line -->
65+
<div
66+
class="absolute top-0 left-0 w-full h-1.5 rounded-t-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
67+
:class="template.colorBg"
68+
></div>
69+
70+
<div class="flex items-start justify-between mb-4">
71+
<!--
72+
Icon Container
73+
Note: [&>svg] selectors force the pasted SVG to be 32x32px
74+
-->
75+
<div
76+
class="p-3 bg-slate-50 rounded-xl group-hover:bg-white group-hover:scale-110 transition-all duration-300 border border-slate-100 [&>svg]:w-8 [&>svg]:h-8"
77+
:class="template.colorText"
78+
v-html="template.iconXml"
79+
>
80+
</div>
81+
82+
<!-- External Link Icon -->
83+
<span class="text-slate-300 group-hover:text-slate-500 transition-colors">
84+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
85+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
86+
</svg>
87+
</span>
88+
</div>
89+
90+
<h3
91+
class="text-xl font-bold text-slate-900 mb-2 transition-colors"
92+
:class="template.hoverText"
93+
>
94+
{{ template.name }}
95+
</h3>
96+
97+
<p class="text-slate-500 text-sm leading-relaxed flex-grow">
98+
{{ template.description }}
99+
</p>
100+
101+
<div class="mt-6 pt-4 border-t border-slate-100 flex items-center text-sm font-semibold text-indigo-600 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
102+
Use Template <span class="ml-1">&rarr;</span>
103+
</div>
104+
</a>
105+
</div>
106+
</div>
107+
`
108+
}

0 commit comments

Comments
 (0)