Skip to content

Commit d802675

Browse files
mythzmythz
committed
Add shared .NET React Templates components
1 parent b97f334 commit d802675

26 files changed

+6000
-0
lines changed

‎demo/App.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { useState, useEffect } from 'react'
2+
import { ShellCommand, AutoUis, GettingStarted, NextLogo, ReactLogo, TypeScriptLogo, TailwindLogo, ViteLogo, ServiceStackLogo } from '../src'
3+
4+
function App() {
5+
const [darkMode, setDarkMode] = useState(() => {
6+
if (typeof window !== 'undefined') {
7+
return window.matchMedia('(prefers-color-scheme: dark)').matches
8+
}
9+
return false
10+
})
11+
12+
useEffect(() => {
13+
document.documentElement.classList.toggle('dark', darkMode)
14+
}, [darkMode])
15+
16+
return (
17+
<div className="min-h-screen bg-gray-100 dark:bg-slate-900 py-12 px-4 transition-colors">
18+
<div className="mx-auto space-y-8">
19+
{/* Header with Dark Mode Toggle */}
20+
<div className="flex items-center justify-center gap-4">
21+
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
22+
React Tailwind Components Demo
23+
</h1>
24+
<button
25+
onClick={() => setDarkMode(!darkMode)}
26+
className="p-2 rounded-lg bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-600 shadow-sm hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors"
27+
aria-label={darkMode ? 'Switch to light mode' : 'Switch to dark mode'}
28+
>
29+
{darkMode ? (
30+
<svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
31+
<path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
32+
</svg>
33+
) : (
34+
<svg className="w-5 h-5 text-slate-700" fill="currentColor" viewBox="0 0 20 20">
35+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
36+
</svg>
37+
)}
38+
</button>
39+
</div>
40+
{/* logos */}
41+
<div className="flex justify-center space-x-4">
42+
<NextLogo className="size-12 text-black" />
43+
<ReactLogo className="size-12" />
44+
<TypeScriptLogo className="size-12" />
45+
<TailwindLogo className="size-12" />
46+
<ViteLogo className="size-12" />
47+
<ServiceStackLogo className="size-12" />
48+
</div>
49+
50+
{/* Getting Started */}
51+
<GettingStarted template="react-static" className="mx-auto" />
52+
53+
{/* ShellCommand Examples */}
54+
<div className="max-w-3xl mx-auto space-y-4">
55+
<h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200">ShellCommand</h2>
56+
<ShellCommand>npm install @react-net-templates</ShellCommand>
57+
<ShellCommand className="my-4">npx create-net react-static MyProject</ShellCommand>
58+
</div>
59+
60+
{/* AutoUis Carousel */}
61+
<div className="max-w-7xl mx-auto space-y-4">
62+
<h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-200">AutoUis</h2>
63+
<AutoUis />
64+
</div>
65+
</div>
66+
</div>
67+
)
68+
}
69+
70+
export default App
71+

‎demo/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Tailwind Components Demo</title>
7+
</head>
8+
<body class="bg-gray-100 dark:bg-slate-900 text-gray-900 dark:text-white transition-colors">
9+
<div id="root"></div>
10+
<script type="module" src="./main.tsx"></script>
11+
</body>
12+
</html>
13+

‎demo/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './styles.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
)
11+

‎demo/styles.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "tailwindcss";
2+
3+
/* Tell Tailwind v4 where to find classes */
4+
@source "../src/**/*.{ts,tsx}";
5+
@source "./**/*.{ts,tsx}";
6+
7+
/* Enable class-based dark mode */
8+
@custom-variant dark (&:where(.dark, .dark *));
9+

0 commit comments

Comments
 (0)