Skip to content

Commit 0b47e0f

Browse files
mythzmythz
committed
React tweaks
1 parent 47e6cd0 commit 0b47e0f

5 files changed

Lines changed: 98 additions & 10 deletions

File tree

‎MyApp/Pages/React/Index.cshtml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -552,9 +552,9 @@ import ReactCallout from "/pages/components/ReactCallout.mjs"
552552
import ReactCopilotTemplates from "/pages/components/ReactCopilotTemplates.mjs"
553553
554554
export const Index = [
555-
template('react-vite', 'React Vite', 'ReactNative',['empty', 'tailwind']),
556-
template('nextjs', 'Next.js', 'NextjsNative',['seo', 'tailwind']),
557-
template('react-spa', 'React SPA', 'ReactNative',['spa','tailwind']),
555+
template('react-vite', 'React Vite', 'ReactNative',['spa', 'empty']),
556+
template('nextjs', 'Next.js', 'NextjsNative',['static', 'featured']),
557+
template('react-spa', 'React SPA', 'ReactNative',['spa','featured']),
558558
].reduce((acc, template) => { acc[template.repo] = template; return acc}, {})
559559
560560

‎MyApp/_posts/2025-11-19_replacing-legacy-uis.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,8 @@ The unprecedented productivity of AI Assisted development has transformed our ro
216216

217217
</div>
218218

219-
<div class="-ml-[30px] w-[840px]">
219+
<div class="not-prose -ml-[30px] w-[840px]">
220+
<a href="/react/">
220221
<react-callout />
222+
</a>
221223
</div>

‎MyApp/wwwroot/css/app.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1017,6 +1017,9 @@
10171017
.h-0\.5 {
10181018
height: calc(var(--spacing) * 0.5);
10191019
}
1020+
.h-1\.5 {
1021+
height: calc(var(--spacing) * 1.5);
1022+
}
10201023
.h-1\/3 {
10211024
height: calc(1/3 * 100%);
10221025
}
@@ -1439,6 +1442,10 @@
14391442
--tw-translate-x: calc(calc(1/4 * 100%) * -1);
14401443
translate: var(--tw-translate-x) var(--tw-translate-y);
14411444
}
1445+
.-translate-x-2 {
1446+
--tw-translate-x: calc(var(--spacing) * -2);
1447+
translate: var(--tw-translate-x) var(--tw-translate-y);
1448+
}
14421449
.-translate-x-full {
14431450
--tw-translate-x: -100%;
14441451
translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1860,6 +1867,10 @@
18601867
.rounded-xl {
18611868
border-radius: var(--radius-xl);
18621869
}
1870+
.rounded-t-2xl {
1871+
border-top-left-radius: var(--radius-2xl);
1872+
border-top-right-radius: var(--radius-2xl);
1873+
}
18631874
.rounded-l-3xl {
18641875
border-top-left-radius: var(--radius-3xl);
18651876
border-bottom-left-radius: var(--radius-3xl);
@@ -1988,6 +1999,9 @@
19881999
.border-green-400 {
19892000
border-color: var(--color-green-400);
19902001
}
2002+
.border-indigo-100 {
2003+
border-color: var(--color-indigo-100);
2004+
}
19912005
.border-indigo-500 {
19922006
border-color: var(--color-indigo-500);
19932007
}
@@ -2913,6 +2927,9 @@
29132927
.font-mono {
29142928
font-family: var(--font-mono);
29152929
}
2930+
.font-sans {
2931+
font-family: Satoshi, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2932+
}
29162933
.text-2xl {
29172934
font-size: var(--text-2xl);
29182935
line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -3687,6 +3704,14 @@
36873704
}
36883705
}
36893706
}
3707+
.group-hover\:translate-x-0 {
3708+
&:is(:where(.group):hover *) {
3709+
@media (hover: hover) {
3710+
--tw-translate-x: calc(var(--spacing) * 0);
3711+
translate: var(--tw-translate-x) var(--tw-translate-y);
3712+
}
3713+
}
3714+
}
36903715
.group-hover\:translate-x-0\.5 {
36913716
&:is(:where(.group):hover *) {
36923717
@media (hover: hover) {
@@ -3728,6 +3753,30 @@
37283753
}
37293754
}
37303755
}
3756+
.group-hover\:border-blue-500\/50 {
3757+
&:is(:where(.group):hover *) {
3758+
@media (hover: hover) {
3759+
border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
3760+
@supports (color: color-mix(in lab, red, red)) {
3761+
& {
3762+
border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
3763+
}
3764+
}
3765+
}
3766+
}
3767+
}
3768+
.group-hover\:border-slate-900\/50 {
3769+
&:is(:where(.group):hover *) {
3770+
@media (hover: hover) {
3771+
border-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
3772+
@supports (color: color-mix(in lab, red, red)) {
3773+
& {
3774+
border-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
3775+
}
3776+
}
3777+
}
3778+
}
3779+
}
37313780
.group-hover\:bg-indigo-700 {
37323781
&:is(:where(.group):hover *) {
37333782
@media (hover: hover) {
@@ -3742,6 +3791,13 @@
37423791
}
37433792
}
37443793
}
3794+
.group-hover\:bg-white {
3795+
&:is(:where(.group):hover *) {
3796+
@media (hover: hover) {
3797+
background-color: var(--color-white);
3798+
}
3799+
}
3800+
}
37453801
.group-hover\:fill-indigo-500 {
37463802
&:is(:where(.group):hover *) {
37473803
@media (hover: hover) {
@@ -3784,6 +3840,13 @@
37843840
}
37853841
}
37863842
}
3843+
.group-hover\:text-blue-600 {
3844+
&:is(:where(.group):hover *) {
3845+
@media (hover: hover) {
3846+
color: var(--color-blue-600);
3847+
}
3848+
}
3849+
}
37873850
.group-hover\:text-gray-500 {
37883851
&:is(:where(.group):hover *) {
37893852
@media (hover: hover) {
@@ -3798,6 +3861,20 @@
37983861
}
37993862
}
38003863
}
3864+
.group-hover\:text-slate-500 {
3865+
&:is(:where(.group):hover *) {
3866+
@media (hover: hover) {
3867+
color: var(--color-slate-500);
3868+
}
3869+
}
3870+
}
3871+
.group-hover\:text-slate-900 {
3872+
&:is(:where(.group):hover *) {
3873+
@media (hover: hover) {
3874+
color: var(--color-slate-900);
3875+
}
3876+
}
3877+
}
38013878
.group-hover\:text-white {
38023879
&:is(:where(.group):hover *) {
38033880
@media (hover: hover) {
@@ -8080,6 +8157,16 @@
80808157
}
80818158
}
80828159
}
8160+
.\[\&\>svg\]\:h-8 {
8161+
&>svg {
8162+
height: calc(var(--spacing) * 8);
8163+
}
8164+
}
8165+
.\[\&\>svg\]\:w-8 {
8166+
&>svg {
8167+
width: calc(var(--spacing) * 8);
8168+
}
8169+
}
80838170
.\[\&\>ul\]\:mt-6 {
80848171
&>ul {
80858172
margin-top: calc(var(--spacing) * 6);

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ export default {
22
template:`
33
<section class="not-prose py-20">
44
<div class="w-full">
5-
<a href="/react/">
65
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-blue-950 to-cyan-900 shadow-xl ring-1 ring-white/10">
76
87
<!-- React Logo Watermark -->
@@ -69,7 +68,6 @@ export default {
6968
</div>
7069
</div>
7170
</div>
72-
</a>
7371
</div>
7472
</section>
7573
`,

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default {
88
{
99
id: 'vite',
1010
name: 'React Vite',
11-
description: 'Lightweight, fast development environment. Best for pure client-side apps.',
11+
description: 'Empty SPA, fast development UX with Vite. Best for pure client-side apps.',
1212
url: 'https://github.com/new?template_name=react-vite&template_owner=NetCoreTemplates',
1313
// Tailwind Colors
1414
colorBg: 'bg-blue-500',
@@ -19,8 +19,8 @@ export default {
1919
},
2020
{
2121
id: 'next',
22-
name: 'Next.js React',
23-
description: 'Full-stack React framework with SSR, API routes, and SEO optimization built-in.',
22+
name: 'Next.js ',
23+
description: 'Full-stack React framework using App Router configured for SSG static exports, SEO optimization built-in.',
2424
url: 'https://github.com/new?template_name=nextjs&template_owner=NetCoreTemplates',
2525
// Tailwind Colors
2626
colorBg: 'bg-slate-900',
@@ -98,7 +98,8 @@ export default {
9898
{{ template.description }}
9999
</p>
100100
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">
101+
<div class="mt-6 pt-4 border-t border-slate-100 flex items-center text-sm font-semibold opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300"
102+
:class="template.colorText">
102103
Use Template <span class="ml-1">&rarr;</span>
103104
</div>
104105
</a>

0 commit comments

Comments
 (0)