feat: Refactor GameBoard component and implement new UI elements
- Removed the old footer structure and replaced it with a new layout in GameBoard.svelte, integrating ToggleGroup components for better user interaction. - Introduced a new data structure for game bets in gameBoard.ts, enhancing the game's functionality. - Added ScrollArea and ToggleGroup components to the UI library for improved scrolling and toggle functionality. - Updated utility functions in utils.ts to include types for better type safety. - Adjusted the design page to reflect the new GameBoard component structure. - Modified svelte.config.js to support aliasing for easier imports.
This commit is contained in:
pd0a6847
parent
9514f01dba
commit
271121fff8
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"files.associations": {
|
"files.associations": {
|
||||||
"*.css": "tailwind"
|
"*.css": "tailwindcss"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
11
package.json
11
package.json
@ -24,12 +24,14 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@cloudflare/workers-types": "^4.20251113.0",
|
"@cloudflare/workers-types": "^4.20251113.0",
|
||||||
|
"@internationalized/date": "^3.10.0",
|
||||||
"@libsql/client": "^0.15.15",
|
"@libsql/client": "^0.15.15",
|
||||||
|
"@lucide/svelte": "^0.554.0",
|
||||||
"@sveltejs/adapter-cloudflare": "^7.2.4",
|
"@sveltejs/adapter-cloudflare": "^7.2.4",
|
||||||
"@sveltejs/kit": "^2.47.1",
|
"@sveltejs/kit": "^2.47.1",
|
||||||
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
||||||
"@tailwindcss/postcss": "^4.1.17",
|
"@tailwindcss/postcss": "^4.1.17",
|
||||||
"@tailwindcss/vite": "^4.1.14",
|
"@tailwindcss/vite": "^4.1.17",
|
||||||
"autoprefixer": "^10.4.22",
|
"autoprefixer": "^10.4.22",
|
||||||
"better-sqlite3": "^12.4.1",
|
"better-sqlite3": "^12.4.1",
|
||||||
"drizzle-kit": "^0.31.7",
|
"drizzle-kit": "^0.31.7",
|
||||||
@ -39,7 +41,9 @@
|
|||||||
"prettier-plugin-tailwindcss": "^0.7.1",
|
"prettier-plugin-tailwindcss": "^0.7.1",
|
||||||
"svelte": "^5.41.0",
|
"svelte": "^5.41.0",
|
||||||
"svelte-check": "^4.3.3",
|
"svelte-check": "^4.3.3",
|
||||||
"tailwindcss": "^4.1.14",
|
"tailwind-variants": "^3.2.2",
|
||||||
|
"tailwindcss": "^4.1.17",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
"typescript": "^5.9.3",
|
"typescript": "^5.9.3",
|
||||||
"vite": "^7.1.10",
|
"vite": "^7.1.10",
|
||||||
"wrangler": "^4.48.0"
|
"wrangler": "^4.48.0"
|
||||||
@ -57,7 +61,6 @@
|
|||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"drizzle-orm": "^0.44.7",
|
"drizzle-orm": "^0.44.7",
|
||||||
"jose": "^6.1.2",
|
"jose": "^6.1.2",
|
||||||
"tailwind-merge": "^3.4.0",
|
"tailwind-merge": "^3.4.0"
|
||||||
"tailwind-variants": "^3.1.1"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
39
pnpm-lock.yaml
generated
39
pnpm-lock.yaml
generated
@ -26,16 +26,19 @@ importers:
|
|||||||
tailwind-merge:
|
tailwind-merge:
|
||||||
specifier: ^3.4.0
|
specifier: ^3.4.0
|
||||||
version: 3.4.0
|
version: 3.4.0
|
||||||
tailwind-variants:
|
|
||||||
specifier: ^3.1.1
|
|
||||||
version: 3.1.1(tailwind-merge@3.4.0)(tailwindcss@4.1.17)
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@cloudflare/workers-types':
|
'@cloudflare/workers-types':
|
||||||
specifier: ^4.20251113.0
|
specifier: ^4.20251113.0
|
||||||
version: 4.20251117.0
|
version: 4.20251117.0
|
||||||
|
'@internationalized/date':
|
||||||
|
specifier: ^3.10.0
|
||||||
|
version: 3.10.0
|
||||||
'@libsql/client':
|
'@libsql/client':
|
||||||
specifier: ^0.15.15
|
specifier: ^0.15.15
|
||||||
version: 0.15.15
|
version: 0.15.15
|
||||||
|
'@lucide/svelte':
|
||||||
|
specifier: ^0.554.0
|
||||||
|
version: 0.554.0(svelte@5.43.8)
|
||||||
'@sveltejs/adapter-cloudflare':
|
'@sveltejs/adapter-cloudflare':
|
||||||
specifier: ^7.2.4
|
specifier: ^7.2.4
|
||||||
version: 7.2.4(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(wrangler@4.48.0(@cloudflare/workers-types@4.20251117.0))
|
version: 7.2.4(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(wrangler@4.48.0(@cloudflare/workers-types@4.20251117.0))
|
||||||
@ -49,7 +52,7 @@ importers:
|
|||||||
specifier: ^4.1.17
|
specifier: ^4.1.17
|
||||||
version: 4.1.17
|
version: 4.1.17
|
||||||
'@tailwindcss/vite':
|
'@tailwindcss/vite':
|
||||||
specifier: ^4.1.14
|
specifier: ^4.1.17
|
||||||
version: 4.1.17(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2))
|
version: 4.1.17(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2))
|
||||||
autoprefixer:
|
autoprefixer:
|
||||||
specifier: ^10.4.22
|
specifier: ^10.4.22
|
||||||
@ -78,9 +81,15 @@ importers:
|
|||||||
svelte-check:
|
svelte-check:
|
||||||
specifier: ^4.3.3
|
specifier: ^4.3.3
|
||||||
version: 4.3.4(picomatch@4.0.3)(svelte@5.43.8)(typescript@5.9.3)
|
version: 4.3.4(picomatch@4.0.3)(svelte@5.43.8)(typescript@5.9.3)
|
||||||
|
tailwind-variants:
|
||||||
|
specifier: ^3.2.2
|
||||||
|
version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.17)
|
||||||
tailwindcss:
|
tailwindcss:
|
||||||
specifier: ^4.1.14
|
specifier: ^4.1.17
|
||||||
version: 4.1.17
|
version: 4.1.17
|
||||||
|
tw-animate-css:
|
||||||
|
specifier: ^1.4.0
|
||||||
|
version: 1.4.0
|
||||||
typescript:
|
typescript:
|
||||||
specifier: ^5.9.3
|
specifier: ^5.9.3
|
||||||
version: 5.9.3
|
version: 5.9.3
|
||||||
@ -796,6 +805,11 @@ packages:
|
|||||||
cpu: [x64]
|
cpu: [x64]
|
||||||
os: [win32]
|
os: [win32]
|
||||||
|
|
||||||
|
'@lucide/svelte@0.554.0':
|
||||||
|
resolution: {integrity: sha512-CM6wLEH8uk3WBpC42t8R0hF7SlQrsYEL6qGuXdB99xKZwKglpWmX5XgYu7FIYOCBYOyC1rm4dNhIe6uF9pOXqw==}
|
||||||
|
peerDependencies:
|
||||||
|
svelte: ^5
|
||||||
|
|
||||||
'@neon-rs/load@0.0.4':
|
'@neon-rs/load@0.0.4':
|
||||||
resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==}
|
resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==}
|
||||||
|
|
||||||
@ -1813,8 +1827,8 @@ packages:
|
|||||||
tailwind-merge@3.4.0:
|
tailwind-merge@3.4.0:
|
||||||
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
|
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
|
||||||
|
|
||||||
tailwind-variants@3.1.1:
|
tailwind-variants@3.2.2:
|
||||||
resolution: {integrity: sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==}
|
resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==}
|
||||||
engines: {node: '>=16.x', pnpm: '>=7.x'}
|
engines: {node: '>=16.x', pnpm: '>=7.x'}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
tailwind-merge: '>=3.0.0'
|
tailwind-merge: '>=3.0.0'
|
||||||
@ -1851,6 +1865,9 @@ packages:
|
|||||||
tunnel-agent@0.6.0:
|
tunnel-agent@0.6.0:
|
||||||
resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
|
resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
|
||||||
|
|
||||||
|
tw-animate-css@1.4.0:
|
||||||
|
resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
|
||||||
|
|
||||||
typescript@5.9.3:
|
typescript@5.9.3:
|
||||||
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
||||||
engines: {node: '>=14.17'}
|
engines: {node: '>=14.17'}
|
||||||
@ -2421,6 +2438,10 @@ snapshots:
|
|||||||
'@libsql/win32-x64-msvc@0.5.22':
|
'@libsql/win32-x64-msvc@0.5.22':
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
'@lucide/svelte@0.554.0(svelte@5.43.8)':
|
||||||
|
dependencies:
|
||||||
|
svelte: 5.43.8
|
||||||
|
|
||||||
'@neon-rs/load@0.0.4': {}
|
'@neon-rs/load@0.0.4': {}
|
||||||
|
|
||||||
'@number-flow/svelte@0.3.9(svelte@5.43.8)':
|
'@number-flow/svelte@0.3.9(svelte@5.43.8)':
|
||||||
@ -3320,7 +3341,7 @@ snapshots:
|
|||||||
|
|
||||||
tailwind-merge@3.4.0: {}
|
tailwind-merge@3.4.0: {}
|
||||||
|
|
||||||
tailwind-variants@3.1.1(tailwind-merge@3.4.0)(tailwindcss@4.1.17):
|
tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.17):
|
||||||
dependencies:
|
dependencies:
|
||||||
tailwindcss: 4.1.17
|
tailwindcss: 4.1.17
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
@ -3358,6 +3379,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
safe-buffer: 5.2.1
|
safe-buffer: 5.2.1
|
||||||
|
|
||||||
|
tw-animate-css@1.4.0: {}
|
||||||
|
|
||||||
typescript@5.9.3: {}
|
typescript@5.9.3: {}
|
||||||
|
|
||||||
undici-types@7.16.0: {}
|
undici-types@7.16.0: {}
|
||||||
|
|||||||
182
src/app.css
182
src/app.css
@ -1,81 +1,121 @@
|
|||||||
@import 'tailwindcss';
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
--radius: 0.625rem;
|
||||||
--foreground: 222.2 84% 4.9%;
|
--background: oklch(1 0 0);
|
||||||
--card: 0 0% 100%;
|
--foreground: oklch(0.129 0.042 264.695);
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card: oklch(1 0 0);
|
||||||
--popover: 0 0% 100%;
|
--card-foreground: oklch(0.129 0.042 264.695);
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover: oklch(1 0 0);
|
||||||
--primary: 222.2 47.4% 11.2%;
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary: oklch(0.208 0.042 265.755);
|
||||||
--secondary: 210 40% 96.1%;
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary: oklch(0.968 0.007 247.896);
|
||||||
--muted: 210 40% 96.1%;
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted: oklch(0.968 0.007 247.896);
|
||||||
--accent: 210 40% 96.1%;
|
--muted-foreground: oklch(0.554 0.046 257.417);
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent: oklch(0.968 0.007 247.896);
|
||||||
--destructive: 0 84.2% 60.2%;
|
--accent-foreground: oklch(0.208 0.042 265.755);
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
--border: 214.3 31.8% 91.4%;
|
--border: oklch(0.929 0.013 255.508);
|
||||||
--input: 214.3 31.8% 91.4%;
|
--input: oklch(0.929 0.013 255.508);
|
||||||
--ring: 222.2 84% 4.9%;
|
--ring: oklch(0.704 0.04 256.788);
|
||||||
--radius: 0.5rem;
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||||
|
--sidebar-primary: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||||
|
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-border: oklch(0.929 0.013 255.508);
|
||||||
|
--sidebar-ring: oklch(0.704 0.04 256.788);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 222.2 84% 4.9%;
|
--background: oklch(0.129 0.042 264.695);
|
||||||
--foreground: 210 40% 98%;
|
--foreground: oklch(0.984 0.003 247.858);
|
||||||
--card: 222.2 84% 4.9%;
|
--card: oklch(0.208 0.042 265.755);
|
||||||
--card-foreground: 210 40% 98%;
|
--card-foreground: oklch(0.984 0.003 247.858);
|
||||||
--popover: 222.2 84% 4.9%;
|
--popover: oklch(0.208 0.042 265.755);
|
||||||
--popover-foreground: 210 40% 98%;
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||||
--primary: 210 40% 98%;
|
--primary: oklch(0.929 0.013 255.508);
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
--primary-foreground: oklch(0.208 0.042 265.755);
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
--secondary: oklch(0.279 0.041 260.031);
|
||||||
--secondary-foreground: 210 40% 98%;
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--muted: 217.2 32.6% 17.5%;
|
--muted: oklch(0.279 0.041 260.031);
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||||
--accent: 217.2 32.6% 17.5%;
|
--accent: oklch(0.279 0.041 260.031);
|
||||||
--accent-foreground: 210 40% 98%;
|
--accent-foreground: oklch(0.984 0.003 247.858);
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
--destructive-foreground: 210 40% 98%;
|
--border: oklch(1 0 0 / 10%);
|
||||||
--border: 217.2 32.6% 17.5%;
|
--input: oklch(1 0 0 / 15%);
|
||||||
--input: 217.2 32.6% 17.5%;
|
--ring: oklch(0.551 0.027 264.364);
|
||||||
--ring: 212.7 26.8% 83.9%;
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.208 0.042 265.755);
|
||||||
|
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||||
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.551 0.027 264.364);
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme {
|
@theme inline {
|
||||||
--color-background: hsl(var(--background));
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
--color-foreground: hsl(var(--foreground));
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
--color-card: hsl(var(--card));
|
--radius-lg: var(--radius);
|
||||||
--color-card-foreground: hsl(var(--card-foreground));
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
--color-popover: hsl(var(--popover));
|
--color-background: var(--background);
|
||||||
--color-popover-foreground: hsl(var(--popover-foreground));
|
--color-foreground: var(--foreground);
|
||||||
--color-primary: hsl(var(--primary));
|
--color-card: var(--card);
|
||||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
--color-card-foreground: var(--card-foreground);
|
||||||
--color-secondary: hsl(var(--secondary));
|
--color-popover: var(--popover);
|
||||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
--color-muted: hsl(var(--muted));
|
--color-primary: var(--primary);
|
||||||
--color-muted-foreground: hsl(var(--muted-foreground));
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
--color-accent: hsl(var(--accent));
|
--color-secondary: var(--secondary);
|
||||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
--color-destructive: hsl(var(--destructive));
|
--color-muted: var(--muted);
|
||||||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
--color-border: hsl(var(--border));
|
--color-accent: var(--accent);
|
||||||
--color-input: hsl(var(--input));
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
--color-ring: hsl(var(--ring));
|
--color-destructive: var(--destructive);
|
||||||
|
--color-border: var(--border);
|
||||||
--radius-lg: var(--radius);
|
--color-input: var(--input);
|
||||||
--radius-md: calc(var(--radius) - 2px);
|
--color-ring: var(--ring);
|
||||||
--radius-sm: calc(var(--radius) - 4px);
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border outline-ring/50;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -49,13 +49,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-auto flex flex-row gap-1 bg-red-100">
|
<div class="ml-auto flex flex-row gap-1 bg-red-100">
|
||||||
<div class="flex min-w-[80px] items-center justify-center border-l text-sm">
|
<div class="flex min-w-[85px] items-center justify-center border-l text-sm">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
<div class="items-center justify-center text-sm text-center">
|
<div class="items-center justify-center text-sm text-center">
|
||||||
<span>CLEAR</span>
|
<span>CLEAR</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="items-center justify-center text-sm text-center">
|
<div class="items-center justify-center text-sm text-center">
|
||||||
<span>BETS</span>
|
<span>ALL BETS</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,451 +1,46 @@
|
|||||||
<footer class="bg-background text-foreground" role="contentinfo" aria-label="Site footer">
|
<script lang="ts">
|
||||||
<div class="mx-auto flex max-w-3xl flex-col gap-8 px-5 md:gap-12 lg:max-w-6xl lg:gap-16 lg:px-6">
|
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
|
||||||
<div class="flex flex-col border-x">
|
import { game } from '$lib/data/gameBoard.ts';
|
||||||
<div
|
import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
|
||||||
class="grid grid-cols-1 items-start gap-12 px-5 py-16 text-center md:grid-cols-2 md:px-12 md:text-left lg:grid-cols-4 lg:gap-x-6 lg:gap-y-16"
|
</script>
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-4">
|
<footer class="border-border bg-background text-foreground">
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Menu</h2>
|
<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
|
||||||
<nav class="flex flex-col gap-3" aria-label="Menu links">
|
<div class="relative flex flex-col justify-between border-x border-t border-border p-4">
|
||||||
<a
|
<div class="flex justify-start mb-3">
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
<ToggleGroup.Root variant="outline" type="multiple" class="pr-5">
|
||||||
href="/">Home</a
|
<ToggleGroup.Item value="BS" aria-label="Toggle BS"><span class="text-xs">BS</span></ToggleGroup.Item>
|
||||||
><a
|
<ToggleGroup.Item value="EO" aria-label="Toggle EO"><span class="text-xs">EO</span></ToggleGroup.Item>
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"><span class="text-xs">PR</span></ToggleGroup.Item>
|
||||||
href="/preview">Preview</a
|
<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"><span class="text-xs">TRP</span></ToggleGroup.Item>
|
||||||
><a
|
<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"><span class="text-xs">TOT</span></ToggleGroup.Item>
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"><span class="text-xs">DOM</span></ToggleGroup.Item>
|
||||||
href="/pricing">Pricing</a
|
<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"><span class="text-xs">SGL</span></ToggleGroup.Item>
|
||||||
>
|
</ToggleGroup.Root>
|
||||||
</nav>
|
<ToggleGroup.Root variant="outline" type="multiple">
|
||||||
</div>
|
<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"><span class="text-xs">1</span></ToggleGroup.Item>
|
||||||
<div class="flex flex-col gap-4">
|
<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"><span class="text-xs">5</span></ToggleGroup.Item>
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Products</h2>
|
<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"><span class="text-xs">6</span></ToggleGroup.Item>
|
||||||
<nav class="flex flex-col gap-3" aria-label="Products links">
|
<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"><span class="text-xs">8</span></ToggleGroup.Item>
|
||||||
<a
|
<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"><span class="text-xs">12</span></ToggleGroup.Item>
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"><span class="text-xs">18</span></ToggleGroup.Item>
|
||||||
href="/components">Figma Kit</a
|
<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"><span class="text-xs">24</span></ToggleGroup.Item>
|
||||||
><a
|
<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"><span class="text-xs">30</span></ToggleGroup.Item>
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"><span class="text-xs">50</span></ToggleGroup.Item>
|
||||||
href="/pro-blocks">Pro Blocks</a
|
<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"><span class="text-xs">150</span></ToggleGroup.Item>
|
||||||
><a
|
</ToggleGroup.Root>
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/plugin">Figma Plugin</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/templates">Templates</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/themes">Themes</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Resources</h2>
|
|
||||||
<nav class="flex flex-col gap-3" aria-label="Resources links">
|
|
||||||
<a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/docs/getting-started">Docs</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/academy">Academy</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/blog">Blog</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/roadmap">Roadmap</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/help">Help & Contact</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Legal</h2>
|
|
||||||
<nav class="flex flex-col gap-3" aria-label="Legal links">
|
|
||||||
<a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/licensing">Licensing Agreement</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/terms">Terms & Conditions</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/privacy-policy">Privacy Policy</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/cookies">Cookies</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex hidden flex-col gap-4 lg:col-span-2 lg:flex">
|
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Components</h2>
|
|
||||||
<nav class="grid grid-cols-2 gap-3" aria-label="Components links">
|
|
||||||
<a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/accordion">Accordion</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/alert">Alert</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/alert-dialog">Alert Dialog</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/aspect-ratio">Aspect Ratio</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/avatar">Avatar</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/badge">Badge</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/breadcrumb">Breadcrumb</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/button">Button</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/button-group">Button Group</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/calendar">Calendar</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/card">Card</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/carousel">Carousel</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/chart">Chart</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/checkbox">Checkbox</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/collapsible">Collapsible</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/combobox">Combobox</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/command">Command</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/context-menu">Context Menu</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/data-table">Data Table</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/date-picker">Date Picker</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/dialog">Dialog</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/drawer">Drawer</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/dropdown-menu">Dropdown Menu</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/empty">Empty</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/field">Field</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/form">Form</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/hover-card">Hover Card</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/input">Input</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/input-group">Input Group</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/input-otp">Input OTP</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/item">Item</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/kbd">Kbd</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/label">Label</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/menubar">Menubar</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/navigation-menu">Navigation Menu</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/pagination">Pagination</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/popover">Popover</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/progress">Progress</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/radio-group">Radio Group</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/resizable">Resizable</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/scroll-area">Scroll-area</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/select">Select</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/separator">Separator</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/sheet">Sheet</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/sidebar">Sidebar</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/skeleton">Skeleton</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/slider">Slider</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/sonner">Sonner</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/spinner">Spinner</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/switch">Switch</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/table">Table</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/tabs">Tabs</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/textarea">Textarea</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/toggle">Toggle</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/toggle-group">Toggle Group</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/tooltip">Tooltip</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/components/typography">Typography</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex hidden flex-col gap-4 lg:flex">
|
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Landing Page Blocks</h2>
|
|
||||||
<nav class="flex flex-col gap-3" aria-label="Landing Page Blocks links">
|
|
||||||
<a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/404-sections">404 Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/banners">Banners</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/bento-grids">Bento Grids</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/blog-sections">Blog Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/cta-sections">CTA Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/comparison-sections">Comparison Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/contact-sections">Contact Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/empty-lp-sections">Empty LP Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/faq-sections">FAQ Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/feature-sections">Feature Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/footers">Footers</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/gallery-sections">Gallery Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/header-sections">Header Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/hero-sections">Hero Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/lp-navbars">LP Navbars</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/landing-page-examples">Landing Page Examples</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/logo-sections">Logo Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/patterns">Patterns</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/pricing-sections">Pricing Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/rich-text-sections">Rich Text Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/stats-sections">Stats Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/team-sections">Team Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/testimonials-sections">Testimonials Sections</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex hidden flex-col gap-4 lg:flex">
|
|
||||||
<h2 class="text-sm font-semibold tracking-tighter">Application Blocks</h2>
|
|
||||||
<nav class="flex flex-col gap-3" aria-label="Application Blocks links">
|
|
||||||
<a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/app-shells">App Shells</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/application-examples">Application Examples</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/buttons">Buttons</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/cards">Cards</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/description-lists">Description Lists</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/empty-sections">Empty Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/navbars">Navbars</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/page-headers">Page Headers</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/section-footers">Section Footers</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/section-headers">Section Headers</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/sections">Sections</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/settings">Settings</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/sign-in">Sign in</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/sign-up">Sign up</a
|
|
||||||
><a
|
|
||||||
class="text-sm text-muted-foreground transition-colors hover:text-foreground"
|
|
||||||
href="/pro-blocks/table-headers">Table Headers</a
|
|
||||||
>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="grid grid-cols-7 gap-4">
|
||||||
data-orientation="horizontal"
|
{#each game as betSection}
|
||||||
role="presentation"
|
<div
|
||||||
data-slot="separator"
|
class="flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded border p-1 text-[12px] leading-tight"
|
||||||
class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
|
|
||||||
></div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col gap-8 px-5 py-12 text-center text-sm md:items-center md:gap-12 md:p-12 lg:flex-row lg:justify-between lg:text-left"
|
|
||||||
>
|
|
||||||
<p class="order-2 text-center text-muted-foreground lg:order-1 lg:text-left">
|
|
||||||
This project is independent and not affiliated with Figma or shadcn/ui.<br />Copyright © <!-- -->2025<!-- -->
|
|
||||||
<a
|
|
||||||
class="text-center text-muted-foreground underline hover:text-foreground"
|
|
||||||
target="_blank"
|
|
||||||
href="https://twitter.com/matsugfx">Matt Wierzbicki</a
|
|
||||||
>
|
>
|
||||||
</p>
|
<span class="font-semibold">{betSection.category}</span>
|
||||||
<div
|
<span>{betSection.id}</span>
|
||||||
class="order-1 flex flex-col items-center gap-4 text-center md:flex-row lg:order-2 lg:flex-row lg:items-center lg:text-left"
|
<span>Max ₩ {betSection.maxBet}</span>
|
||||||
>
|
<span>{betSection.payout}:1</span>
|
||||||
<button
|
</div>
|
||||||
data-slot="dropdown-menu-trigger"
|
{/each}
|
||||||
class="[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full border border-border bg-background text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:border-input dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40"
|
|
||||||
type="button"
|
|
||||||
id="radix-_R_1e5flb_"
|
|
||||||
aria-haspopup="menu"
|
|
||||||
aria-expanded="false"
|
|
||||||
data-state="closed"
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="lucide lucide-sun h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
|
|
||||||
aria-hidden="true"
|
|
||||||
><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"
|
|
||||||
></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
|
|
||||||
></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
|
|
||||||
d="m6.34 17.66-1.41 1.41"
|
|
||||||
></path><path d="m19.07 4.93-1.41 1.41"></path></svg
|
|
||||||
><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
|
|
||||||
aria-hidden="true"
|
|
||||||
><path
|
|
||||||
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
|
|
||||||
></path></svg
|
|
||||||
><span class="sr-only">Toggle theme</span></button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
10
src/lib/components/ui/scroll-area/index.ts
Normal file
10
src/lib/components/ui/scroll-area/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import Scrollbar from "./scroll-area-scrollbar.svelte";
|
||||||
|
import Root from "./scroll-area.svelte";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
Scrollbar,
|
||||||
|
//,
|
||||||
|
Root as ScrollArea,
|
||||||
|
Scrollbar as ScrollAreaScrollbar,
|
||||||
|
};
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
|
||||||
|
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
class: className,
|
||||||
|
orientation = "vertical",
|
||||||
|
children,
|
||||||
|
...restProps
|
||||||
|
}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ScrollAreaPrimitive.Scrollbar
|
||||||
|
bind:ref
|
||||||
|
data-slot="scroll-area-scrollbar"
|
||||||
|
{orientation}
|
||||||
|
class={cn(
|
||||||
|
"flex touch-none select-none p-px transition-colors",
|
||||||
|
orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent",
|
||||||
|
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...restProps}
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
<ScrollAreaPrimitive.Thumb
|
||||||
|
data-slot="scroll-area-thumb"
|
||||||
|
class="bg-border relative flex-1 rounded-full"
|
||||||
|
/>
|
||||||
|
</ScrollAreaPrimitive.Scrollbar>
|
||||||
43
src/lib/components/ui/scroll-area/scroll-area.svelte
Normal file
43
src/lib/components/ui/scroll-area/scroll-area.svelte
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
|
||||||
|
import { Scrollbar } from "./index.js";
|
||||||
|
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
viewportRef = $bindable(null),
|
||||||
|
class: className,
|
||||||
|
orientation = "vertical",
|
||||||
|
scrollbarXClasses = "",
|
||||||
|
scrollbarYClasses = "",
|
||||||
|
children,
|
||||||
|
...restProps
|
||||||
|
}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
|
||||||
|
orientation?: "vertical" | "horizontal" | "both" | undefined;
|
||||||
|
scrollbarXClasses?: string | undefined;
|
||||||
|
scrollbarYClasses?: string | undefined;
|
||||||
|
viewportRef?: HTMLElement | null;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
bind:ref
|
||||||
|
data-slot="scroll-area"
|
||||||
|
class={cn("relative", className)}
|
||||||
|
{...restProps}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport
|
||||||
|
bind:ref={viewportRef}
|
||||||
|
data-slot="scroll-area-viewport"
|
||||||
|
class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
|
||||||
|
>
|
||||||
|
{@render children?.()}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
{#if orientation === "vertical" || orientation === "both"}
|
||||||
|
<Scrollbar orientation="vertical" class={scrollbarYClasses} />
|
||||||
|
{/if}
|
||||||
|
{#if orientation === "horizontal" || orientation === "both"}
|
||||||
|
<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
|
||||||
|
{/if}
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
10
src/lib/components/ui/toggle-group/index.ts
Normal file
10
src/lib/components/ui/toggle-group/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import Root from "./toggle-group.svelte";
|
||||||
|
import Item from "./toggle-group-item.svelte";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
Item,
|
||||||
|
//
|
||||||
|
Root as ToggleGroup,
|
||||||
|
Item as ToggleGroupItem,
|
||||||
|
};
|
||||||
34
src/lib/components/ui/toggle-group/toggle-group-item.svelte
Normal file
34
src/lib/components/ui/toggle-group/toggle-group-item.svelte
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
|
||||||
|
import { getToggleGroupCtx } from "./toggle-group.svelte";
|
||||||
|
import { cn } from "$lib/utils.js";
|
||||||
|
import { type ToggleVariants, toggleVariants } from "$lib/components/ui/toggle/index.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
value = $bindable(),
|
||||||
|
class: className,
|
||||||
|
size,
|
||||||
|
variant,
|
||||||
|
...restProps
|
||||||
|
}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
|
||||||
|
|
||||||
|
const ctx = getToggleGroupCtx();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ToggleGroupPrimitive.Item
|
||||||
|
bind:ref
|
||||||
|
data-slot="toggle-group-item"
|
||||||
|
data-variant={ctx.variant || variant}
|
||||||
|
data-size={ctx.size || size}
|
||||||
|
class={cn(
|
||||||
|
toggleVariants({
|
||||||
|
variant: ctx.variant || variant,
|
||||||
|
size: ctx.size || size,
|
||||||
|
}),
|
||||||
|
"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-s-md last:rounded-e-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-s-0 data-[variant=outline]:first:border-s",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{value}
|
||||||
|
{...restProps}
|
||||||
|
/>
|
||||||
47
src/lib/components/ui/toggle-group/toggle-group.svelte
Normal file
47
src/lib/components/ui/toggle-group/toggle-group.svelte
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<script lang="ts" module>
|
||||||
|
import { getContext, setContext } from "svelte";
|
||||||
|
import type { ToggleVariants } from "$lib/components/ui/toggle/index.js";
|
||||||
|
export function setToggleGroupCtx(props: ToggleVariants) {
|
||||||
|
setContext("toggleGroup", props);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getToggleGroupCtx() {
|
||||||
|
return getContext<ToggleVariants>("toggleGroup");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
|
||||||
|
import { cn } from "$lib/utils.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
value = $bindable(),
|
||||||
|
class: className,
|
||||||
|
size = "default",
|
||||||
|
variant = "default",
|
||||||
|
...restProps
|
||||||
|
}: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();
|
||||||
|
|
||||||
|
setToggleGroupCtx({
|
||||||
|
variant,
|
||||||
|
size,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Discriminated Unions + Destructing (required for bindable) do not
|
||||||
|
get along, so we shut typescript up by casting `value` to `never`.
|
||||||
|
-->
|
||||||
|
<ToggleGroupPrimitive.Root
|
||||||
|
bind:value={value as never}
|
||||||
|
bind:ref
|
||||||
|
data-slot="toggle-group"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
class={cn(
|
||||||
|
"group/toggle-group data-[variant=outline]:shadow-xs flex w-fit items-center rounded-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...restProps}
|
||||||
|
/>
|
||||||
13
src/lib/components/ui/toggle/index.ts
Normal file
13
src/lib/components/ui/toggle/index.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Root from "./toggle.svelte";
|
||||||
|
export {
|
||||||
|
toggleVariants,
|
||||||
|
type ToggleSize,
|
||||||
|
type ToggleVariant,
|
||||||
|
type ToggleVariants,
|
||||||
|
} from "./toggle.svelte";
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
//
|
||||||
|
Root as Toggle,
|
||||||
|
};
|
||||||
52
src/lib/components/ui/toggle/toggle.svelte
Normal file
52
src/lib/components/ui/toggle/toggle.svelte
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<script lang="ts" module>
|
||||||
|
import { type VariantProps, tv } from "tailwind-variants";
|
||||||
|
|
||||||
|
export const toggleVariants = tv({
|
||||||
|
base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-transparent",
|
||||||
|
outline:
|
||||||
|
"border-input shadow-xs hover:bg-accent hover:text-accent-foreground border bg-transparent",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 min-w-9 px-2",
|
||||||
|
sm: "h-8 min-w-8 px-1.5",
|
||||||
|
lg: "h-10 min-w-10 px-2.5",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
|
||||||
|
export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
|
||||||
|
export type ToggleVariants = VariantProps<typeof toggleVariants>;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Toggle as TogglePrimitive } from "bits-ui";
|
||||||
|
import { cn } from "$lib/utils.js";
|
||||||
|
|
||||||
|
let {
|
||||||
|
ref = $bindable(null),
|
||||||
|
pressed = $bindable(false),
|
||||||
|
class: className,
|
||||||
|
size = "default",
|
||||||
|
variant = "default",
|
||||||
|
...restProps
|
||||||
|
}: TogglePrimitive.RootProps & {
|
||||||
|
variant?: ToggleVariant;
|
||||||
|
size?: ToggleSize;
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<TogglePrimitive.Root
|
||||||
|
bind:ref
|
||||||
|
bind:pressed
|
||||||
|
data-slot="toggle"
|
||||||
|
class={cn(toggleVariants({ variant, size }), className)}
|
||||||
|
{...restProps}
|
||||||
|
/>
|
||||||
63
src/lib/data/gameBoard.ts
Normal file
63
src/lib/data/gameBoard.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
type GameBoard = {
|
||||||
|
category: string;
|
||||||
|
id: string;
|
||||||
|
maxBet: Number;
|
||||||
|
payout: Number;
|
||||||
|
tag: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const game: GameBoard[] = [
|
||||||
|
|
||||||
|
{ category: "BS", id: "Big", maxBet: 300, payout: 1 ,tag:"B"},
|
||||||
|
{ category: "BS", id: "Small", maxBet: 300, payout: 1 ,tag:"S"},
|
||||||
|
{ category: "EO", id: "Even", maxBet: 300, payout: 1 ,tag:"E"},
|
||||||
|
{ category: "EO", id: "Odd", maxBet: 300, payout: 1 ,tag:"O"},
|
||||||
|
{ category: "PAIR", id: "Pair1", maxBet: 35, payout: 8 ,tag:"P1"},
|
||||||
|
{ category: "PAIR", id: "Pair2", maxBet: 35, payout: 8 ,tag:"P2"},
|
||||||
|
{ category: "PAIR", id: "Pair3", maxBet: 35, payout: 8 ,tag:"P3"},
|
||||||
|
{ category: "PAIR", id: "Pair4", maxBet: 35, payout: 8 ,tag:"P4"},
|
||||||
|
{ category: "PAIR", id: "Pair5", maxBet: 35, payout: 8 ,tag:"P5"},
|
||||||
|
{ category: "PAIR", id: "Pair6", maxBet: 35, payout: 8 ,tag:"P6"},
|
||||||
|
{ category: "TRIPLE", id: "Triple1", maxBet: 2, payout: 150 ,tag:"TPL1"},
|
||||||
|
{ category: "TRIPLE", id: "Triple2", maxBet: 2, payout: 150 ,tag:"TPL2"},
|
||||||
|
{ category: "TRIPLE", id: "Triple3", maxBet: 2, payout: 150 ,tag:"TPL3"},
|
||||||
|
{ category: "TRIPLE", id: "Triple4", maxBet: 2, payout: 150 ,tag:"TPL4"},
|
||||||
|
{ category: "TRIPLE", id: "Triple5", maxBet: 2, payout: 150 ,tag:"TPL5"},
|
||||||
|
{ category: "TRIPLE", id: "Triple6", maxBet: 2, payout: 150 ,tag:"TPL6"},
|
||||||
|
{ category: "TRIPLE", id: "TripleAny", maxBet: 10, payout: 24 ,tag:"TPLA"},
|
||||||
|
{ category: "TOTAL", id: "Total4", maxBet: 5, payout: 50 ,tag:"TOT4"},
|
||||||
|
{ category: "TOTAL", id: "Total5", maxBet: 10, payout: 30 ,tag:"TOT5"},
|
||||||
|
{ category: "TOTAL", id: "Total6", maxBet: 15, payout: 18 ,tag:"TOT6"},
|
||||||
|
{ category: "TOTAL", id: "Total7", maxBet: 25, payout: 12 ,tag:"TOT7"},
|
||||||
|
{ category: "TOTAL", id: "Total8", maxBet: 35, payout: 8 ,tag:"TOT8"},
|
||||||
|
{ category: "TOTAL", id: "Total9", maxBet: 50, payout: 6 ,tag:"TOT9"},
|
||||||
|
{ category: "TOTAL", id: "Total10", maxBet: 50, payout: 6 ,tag:"TOT10"},
|
||||||
|
{ category: "TOTAL", id: "Total11", maxBet: 50, payout: 6 ,tag:"TOT11"},
|
||||||
|
{ category: "TOTAL", id: "Total12", maxBet: 50, payout: 6 ,tag:"TOT12"},
|
||||||
|
{ category: "TOTAL", id: "Total13", maxBet: 35, payout: 8 ,tag:"TOT13"},
|
||||||
|
{ category: "TOTAL", id: "Total14", maxBet: 25, payout: 12 ,tag:"TOT14"},
|
||||||
|
{ category: "TOTAL", id: "Total15", maxBet: 15, payout: 18 ,tag:"TOT15"},
|
||||||
|
{ category: "TOTAL", id: "Total16", maxBet: 10, payout: 30 ,tag:"TOT16"},
|
||||||
|
{ category: "TOTAL", id: "Total17", maxBet: 5, payout: 50 ,tag:"TOT17"},
|
||||||
|
{ category: "DOMINO", id: "Domino12", maxBet: 60, payout: 5 ,tag:"D12"},
|
||||||
|
{ category: "DOMINO", id: "Domino13", maxBet: 60, payout: 5 ,tag:"D13"},
|
||||||
|
{ category: "DOMINO", id: "Domino14", maxBet: 60, payout: 5 ,tag:"D14"},
|
||||||
|
{ category: "DOMINO", id: "Domino15", maxBet: 60, payout: 5 ,tag:"D15"},
|
||||||
|
{ category: "DOMINO", id: "Domino16", maxBet: 60, payout: 5 ,tag:"D16"},
|
||||||
|
{ category: "DOMINO", id: "Domino23", maxBet: 60, payout: 5 ,tag:"D23"},
|
||||||
|
{ category: "DOMINO", id: "Domino24", maxBet: 60, payout: 5 ,tag:"D24"},
|
||||||
|
{ category: "DOMINO", id: "Domino25", maxBet: 60, payout: 5 ,tag:"D25"},
|
||||||
|
{ category: "DOMINO", id: "Domino26", maxBet: 60, payout: 5 ,tag:"D26"},
|
||||||
|
{ category: "DOMINO", id: "Domino34", maxBet: 60, payout: 5 ,tag:"D34"},
|
||||||
|
{ category: "DOMINO", id: "Domino35", maxBet: 60, payout: 5 ,tag:"D35"},
|
||||||
|
{ category: "DOMINO", id: "Domino36", maxBet: 60, payout: 5 ,tag:"D36"},
|
||||||
|
{ category: "DOMINO", id: "Domino45", maxBet: 60, payout: 5 ,tag:"D45"},
|
||||||
|
{ category: "DOMINO", id: "Domino46", maxBet: 60, payout: 5 ,tag:"D46"},
|
||||||
|
{ category: "DOMINO", id: "Domino56", maxBet: 60, payout: 5 ,tag:"D56"},
|
||||||
|
{ category: "SINGLE", id: "Single1_N1", maxBet: 100, payout: 1 ,tag:"S1"},
|
||||||
|
{ category: "SINGLE", id: "Single2_N1", maxBet: 100, payout: 1 ,tag:"S2"},
|
||||||
|
{ category: "SINGLE", id: "Single3_N1", maxBet: 100, payout: 1 ,tag:"S3"},
|
||||||
|
{ category: "SINGLE", id: "Single4_N1", maxBet: 100, payout: 1 ,tag:"S4"},
|
||||||
|
{ category: "SINGLE", id: "Single5_N1", maxBet: 100, payout: 1 ,tag:"S5"},
|
||||||
|
{ category: "SINGLE", id: "Single6_N1", maxBet: 100, payout: 1 ,tag:"S6"},
|
||||||
|
];
|
||||||
@ -1,6 +1,13 @@
|
|||||||
import { type ClassValue, clsx } from "clsx";
|
import { clsx, type ClassValue } from "clsx";
|
||||||
import { twMerge } from "tailwind-merge";
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs));
|
return twMerge(clsx(inputs));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
|
||||||
|
export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
|
||||||
|
export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
|
||||||
|
|||||||
@ -2,9 +2,10 @@
|
|||||||
import Header from '@/components/custom/Header.svelte';
|
import Header from '@/components/custom/Header.svelte';
|
||||||
import Footer from '@/components/custom/Footer.svelte';
|
import Footer from '@/components/custom/Footer.svelte';
|
||||||
import GameBoard from '@/components/custom/GameBoard.svelte';
|
import GameBoard from '@/components/custom/GameBoard.svelte';
|
||||||
import { Button } from '@/components/ui/button/index.js';
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
<GameBoard />
|
<GameBoard />
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
|
|||||||
@ -12,7 +12,7 @@ const config = {
|
|||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
alias: {
|
alias: {
|
||||||
'@': './src/lib'
|
"@/*": "./src/lib/*",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user