Klesti Selimaj
Generated
+407
-60
@@ -35,7 +35,6 @@
|
||||
"@radix-ui/react-toggle": "^1.1.9",
|
||||
"@radix-ui/react-toggle-group": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.7",
|
||||
"@sinm/react-file-tree": "^1.1.1",
|
||||
"@uiw/codemirror-theme-vscode": "^4.25.4",
|
||||
"@uiw/react-codemirror": "^4.25.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -45,6 +44,7 @@
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "19.2.3",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "19.2.3",
|
||||
@@ -923,6 +923,29 @@
|
||||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/react-accessible-icon": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
|
||||
"integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-visually-hidden": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-accordion": {
|
||||
"version": "1.2.12",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
|
||||
@@ -1461,6 +1484,57 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-form": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
|
||||
"integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-label": "2.1.7",
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-label": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
|
||||
"integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-hover-card": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
|
||||
@@ -1682,6 +1756,70 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-one-time-password-field": {
|
||||
"version": "0.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
|
||||
"integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-effect-event": "0.0.2",
|
||||
"@radix-ui/react-use-is-hydrated": "0.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-password-toggle-field": {
|
||||
"version": "0.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
|
||||
"integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-effect-event": "0.0.2",
|
||||
"@radix-ui/react-use-is-hydrated": "0.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popover": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
|
||||
@@ -2319,6 +2457,58 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-toolbar": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
|
||||
"integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-separator": "1.1.7",
|
||||
"@radix-ui/react-toggle-group": "1.1.11"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||
"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-tooltip": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
|
||||
@@ -2554,16 +2744,6 @@
|
||||
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@sinm/react-file-tree": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@sinm/react-file-tree/-/react-file-tree-1.1.1.tgz",
|
||||
"integrity": "sha512-XlHLLNV18zWx7mYEH5gtlBb7jYFX7GaBA5jmhsG9YXhgwyyK33JgymrbU+IHDDBakAoZ+xISLKzu2ldzKbA/wg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/react-virtualized": "^9.21.15",
|
||||
"react-virtualized": "^9.22.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||
@@ -2917,16 +3097,11 @@
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.15",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
|
||||
"integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
|
||||
"integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
@@ -2942,16 +3117,6 @@
|
||||
"@types/react": "^19.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-virtualized": {
|
||||
"version": "9.22.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-virtualized/-/react-virtualized-9.22.3.tgz",
|
||||
"integrity": "sha512-UKRWeBIrECaKhE4O//TSFhlgwntMwyiEIOA7WZoVkr52Jahv0dH6YIOorqc358N2V3oKFclsq5XxPmx2PiYB5A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@uiw/codemirror-extensions-basic-setup": {
|
||||
"version": "4.25.4",
|
||||
"resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.25.4.tgz",
|
||||
@@ -3872,6 +4037,221 @@
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/radix-ui": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
|
||||
"integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-accessible-icon": "1.1.7",
|
||||
"@radix-ui/react-accordion": "1.2.12",
|
||||
"@radix-ui/react-alert-dialog": "1.1.15",
|
||||
"@radix-ui/react-arrow": "1.1.7",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.7",
|
||||
"@radix-ui/react-avatar": "1.1.10",
|
||||
"@radix-ui/react-checkbox": "1.3.3",
|
||||
"@radix-ui/react-collapsible": "1.1.12",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-context-menu": "2.2.16",
|
||||
"@radix-ui/react-dialog": "1.1.15",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-dropdown-menu": "2.1.16",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-form": "0.1.8",
|
||||
"@radix-ui/react-hover-card": "1.1.15",
|
||||
"@radix-ui/react-label": "2.1.7",
|
||||
"@radix-ui/react-menu": "2.1.16",
|
||||
"@radix-ui/react-menubar": "1.1.16",
|
||||
"@radix-ui/react-navigation-menu": "1.2.14",
|
||||
"@radix-ui/react-one-time-password-field": "0.1.8",
|
||||
"@radix-ui/react-password-toggle-field": "0.1.3",
|
||||
"@radix-ui/react-popover": "1.1.15",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-progress": "1.1.7",
|
||||
"@radix-ui/react-radio-group": "1.3.8",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-scroll-area": "1.2.10",
|
||||
"@radix-ui/react-select": "2.2.6",
|
||||
"@radix-ui/react-separator": "1.1.7",
|
||||
"@radix-ui/react-slider": "1.3.6",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-switch": "1.2.6",
|
||||
"@radix-ui/react-tabs": "1.1.13",
|
||||
"@radix-ui/react-toast": "1.2.15",
|
||||
"@radix-ui/react-toggle": "1.1.10",
|
||||
"@radix-ui/react-toggle-group": "1.1.11",
|
||||
"@radix-ui/react-toolbar": "1.1.11",
|
||||
"@radix-ui/react-tooltip": "1.2.8",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-effect-event": "0.0.2",
|
||||
"@radix-ui/react-use-escape-keydown": "1.1.1",
|
||||
"@radix-ui/react-use-is-hydrated": "0.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1",
|
||||
"@radix-ui/react-visually-hidden": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-aspect-ratio": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
|
||||
"integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-avatar": {
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
|
||||
"integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-is-hydrated": "0.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-label": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
|
||||
"integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-progress": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
|
||||
"integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
|
||||
"integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/radix-ui/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
|
||||
@@ -3920,12 +4300,6 @@
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
|
||||
@@ -4026,33 +4400,6 @@
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtualized": {
|
||||
"version": "9.22.6",
|
||||
"resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
|
||||
"integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.2",
|
||||
"clsx": "^1.0.4",
|
||||
"dom-helpers": "^5.1.3",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-virtualized/node_modules/clsx": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "2.15.4",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
|
||||
|
||||
+1
-1
@@ -35,7 +35,6 @@
|
||||
"@radix-ui/react-toggle": "^1.1.9",
|
||||
"@radix-ui/react-toggle-group": "^1.1.10",
|
||||
"@radix-ui/react-tooltip": "^1.2.7",
|
||||
"@sinm/react-file-tree": "^1.1.1",
|
||||
"@uiw/codemirror-theme-vscode": "^4.25.4",
|
||||
"@uiw/react-codemirror": "^4.25.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -45,6 +44,7 @@
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"lucide-react": "^0.563.0",
|
||||
"next": "16.1.6",
|
||||
"radix-ui": "^1.4.3",
|
||||
"react": "19.2.3",
|
||||
"react-day-picker": "^9.13.0",
|
||||
"react-dom": "19.2.3",
|
||||
|
||||
@@ -215,7 +215,6 @@
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
@apply -translate-y-1;
|
||||
box-shadow: 0 10px 40px color-mix(in oklch, var(--primary) 15%, transparent);
|
||||
}
|
||||
|
||||
|
||||
+109
-122
@@ -1,11 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
|
||||
import LeaderboardRow from "@/components/app/LeaderboardRow";
|
||||
import { useState } from "react";
|
||||
|
||||
const Leaderboards = () => {
|
||||
const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
|
||||
import LeaderboardRow from "@/app/leaderboards/components/LeaderboardRow";
|
||||
import StatCard from "@/components/app/StatCard";
|
||||
|
||||
const globalLeaderboard = [
|
||||
{
|
||||
@@ -79,7 +98,6 @@ const Leaderboards = () => {
|
||||
category: "Any%",
|
||||
},
|
||||
];
|
||||
|
||||
const weeklyLeaderboard = [
|
||||
{
|
||||
rank: 1,
|
||||
@@ -153,153 +171,122 @@ const Leaderboards = () => {
|
||||
},
|
||||
];
|
||||
|
||||
export default function Leaderboards() {
|
||||
const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
|
||||
|
||||
const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
|
||||
|
||||
const data = activeTab === "global" ? globalLeaderboard : weeklyLeaderboard;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="container mx-auto px-6 space-y-8">
|
||||
{/* Header */}
|
||||
<div className="mb-10">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">
|
||||
Leaderboards
|
||||
</h1>
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Leaderboards</h1>
|
||||
<p className="text-muted-foreground">
|
||||
The fastest runners in the game. Will you claim a spot?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Row */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Globe className="h-5 w-5 text-primary mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
12,453
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">Total Runners</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
2:34.21
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">World Record</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">847K</p>
|
||||
<p className="text-xs text-muted-foreground">Runs This Week</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded-xl p-4 text-center">
|
||||
<Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
|
||||
<p className="text-2xl font-bold font-mono text-foreground">
|
||||
5d 12h
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">Until Reset</p>
|
||||
</div>
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={Globe}
|
||||
label="Total Runners"
|
||||
value="12,453"
|
||||
index={0}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Trophy}
|
||||
label="World Record"
|
||||
value="2:34.21"
|
||||
index={1}
|
||||
/>
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="Runs This Week"
|
||||
value="847K"
|
||||
index={2}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Calendar}
|
||||
label="Until Reset"
|
||||
value="5d 12h"
|
||||
index={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tabs and Filters */}
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
|
||||
{/* Global/Weekly Toggle */}
|
||||
<div className="flex gap-1 bg-card border border-border rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setActiveTab("global")}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
activeTab === "global"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
{/* Tabs + Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between">
|
||||
<Tabs
|
||||
value={activeTab}
|
||||
onValueChange={(v) => setActiveTab(v as "global" | "weekly")}
|
||||
>
|
||||
<Globe className="h-4 w-4" />
|
||||
<TabsList>
|
||||
<TabsTrigger value="global">
|
||||
<Globe className="mr-2 h-4 w-4" />
|
||||
Global
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("weekly")}
|
||||
className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
activeTab === "weekly"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<Calendar className="h-4 w-4" />
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="weekly">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Weekly
|
||||
</button>
|
||||
</div>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat, i) => (
|
||||
<button
|
||||
<Badge
|
||||
key={cat}
|
||||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
|
||||
i === 0
|
||||
? "bg-primary/10 text-primary border border-primary/30"
|
||||
: "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
|
||||
}`}
|
||||
variant={i === 0 ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Leaderboard Table */}
|
||||
<div className="bg-card border border-border rounded-xl overflow-hidden">
|
||||
<table className="w-full">
|
||||
<thead className="bg-secondary/50">
|
||||
<tr>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Rank
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Runner
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
PB
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Runs
|
||||
</th>
|
||||
<th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Category
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(activeTab === "global"
|
||||
? globalLeaderboard
|
||||
: weeklyLeaderboard
|
||||
).map((entry, i) => (
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="pl-5">Rank</TableHead>
|
||||
<TableHead>Runner</TableHead>
|
||||
<TableHead>PB</TableHead>
|
||||
<TableHead>Runs</TableHead>
|
||||
<TableHead className="pr-5">Category</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{data.map((entry, i) => (
|
||||
<LeaderboardRow key={entry.username} {...entry} index={i} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="flex items-center justify-center gap-2 mt-6">
|
||||
<button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
|
||||
Previous
|
||||
</button>
|
||||
{[1, 2, 3, 50].map((page, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className={`px-3 py-1.5 rounded-lg transition-all ${
|
||||
page === 1
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious />
|
||||
</PaginationItem>
|
||||
|
||||
{[1, 2, 3, 50].map((p) => (
|
||||
<PaginationItem key={p}>
|
||||
<PaginationLink isActive={p === 1}>{p}</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext />
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Leaderboards;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { LoginPage } from "@/components/auth/LoginPage";
|
||||
|
||||
export default function Page() {
|
||||
return <LoginPage />;
|
||||
}
|
||||
+4
-6
@@ -4,7 +4,7 @@ import { Timer, Zap, Trophy, Users, ArrowRight, Play } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
|
||||
const Landing = () => {
|
||||
export default function Landing() {
|
||||
const features = [
|
||||
{
|
||||
icon: Timer,
|
||||
@@ -77,7 +77,7 @@ const Landing = () => {
|
||||
className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in stagger-3 opacity-0"
|
||||
style={{ animationFillMode: "forwards" }}
|
||||
>
|
||||
<Link href="/run">
|
||||
<Link href="/register">
|
||||
<Button variant="hero" className="group">
|
||||
<Play className="h-5 w-5" />
|
||||
Start Your First Run
|
||||
@@ -85,7 +85,7 @@ const Landing = () => {
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/leaderboards">
|
||||
<Button variant="hero-outline">
|
||||
<Button variant="hero">
|
||||
<Trophy className="h-5 w-5" />
|
||||
View Leaderboards
|
||||
</Button>
|
||||
@@ -183,6 +183,4 @@ const Landing = () => {
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Clock, Zap, Users } from "lucide-react";
|
||||
|
||||
interface ProblemCardProps {
|
||||
@@ -9,7 +10,14 @@ interface ProblemCardProps {
|
||||
index?: number;
|
||||
}
|
||||
|
||||
const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }: ProblemCardProps) => {
|
||||
const ProblemCard = ({
|
||||
name,
|
||||
difficulty,
|
||||
tags,
|
||||
bestTime,
|
||||
attempts,
|
||||
index = 0,
|
||||
}: ProblemCardProps) => {
|
||||
const difficultyStyles = {
|
||||
easy: "diff-easy",
|
||||
medium: "diff-medium",
|
||||
@@ -25,7 +33,10 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
|
||||
return (
|
||||
<div
|
||||
className={`group relative bg-card border border-border rounded-xl p-5 card-hover cursor-pointer animate-fade-in opacity-0`}
|
||||
style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
{/* Glow effect on hover */}
|
||||
<div className="absolute inset-0 rounded-xl bg-primary/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
@@ -36,7 +47,9 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
|
||||
<h3 className="font-semibold text-foreground group-hover:text-primary transition-colors">
|
||||
{name}
|
||||
</h3>
|
||||
<span className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-md text-xs font-medium ${difficultyStyles[difficulty]}`}
|
||||
>
|
||||
{difficultyLabels[difficulty]}
|
||||
</span>
|
||||
</div>
|
||||
@@ -68,10 +81,10 @@ const ProblemCard = ({ name, difficulty, tags, bestTime, attempts, index = 0 }:
|
||||
</div>
|
||||
|
||||
{/* Quick run button - appears on hover */}
|
||||
<div className="absolute top-1/2 right-4 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
|
||||
<button className="p-2 rounded-lg bg-primary text-primary-foreground">
|
||||
<div className="absolute bottom-0 right-0 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-2 group-hover:translate-x-0">
|
||||
<Button size="p2">
|
||||
<Zap className="h-4 w-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+89
-104
@@ -1,12 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { Search, Grid, List } from "lucide-react";
|
||||
import ProblemCard from "@/components/app/ProblemCard";
|
||||
import { useState } from "react";
|
||||
|
||||
const Problems = () => {
|
||||
import ProblemCard from "@/app/problems/components/ProblemCard";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
|
||||
export default function Problems() {
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
|
||||
const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
|
||||
const difficulties = ["All", "Easy", "Medium", "Hard"];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6 space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Problems</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Choose your battleground. Each run brings you closer to your PB.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input placeholder="Search problems..." className="pl-9" />
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((cat, i) => (
|
||||
<Badge
|
||||
key={cat}
|
||||
variant={i === 0 ? "default" : "secondary"}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Difficulty Filter */}
|
||||
<div className="flex gap-2">
|
||||
{difficulties.map((diff, i) => (
|
||||
<Button
|
||||
key={diff}
|
||||
variant={i === 0 ? "outline" : "ghost"}
|
||||
size="sm"
|
||||
>
|
||||
{diff}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={viewMode}
|
||||
onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
|
||||
>
|
||||
<ToggleGroupItem value="grid" aria-label="Grid view">
|
||||
<Grid className="h-4 w-4" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="list" aria-label="List view">
|
||||
<List className="h-4 w-4" />
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
|
||||
{/* Problem Grid */}
|
||||
<div
|
||||
className={`grid gap-4 ${
|
||||
viewMode === "grid"
|
||||
? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
|
||||
: "grid-cols-1"
|
||||
}`}
|
||||
>
|
||||
{problems.map((problem, i) => (
|
||||
<ProblemCard key={problem.name} {...problem} index={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------- data ---------------- */
|
||||
|
||||
const problems = [
|
||||
{
|
||||
name: "Two Sum Dash",
|
||||
@@ -93,105 +180,3 @@ const Problems = () => {
|
||||
attempts: 987,
|
||||
},
|
||||
];
|
||||
|
||||
const categories = ["All", "Arrays", "Trees", "Graphs", "DP", "Strings"];
|
||||
const difficulties = ["All", "Easy", "Medium", "Hard"];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Header */}
|
||||
<div className="mb-10">
|
||||
<h1 className="text-4xl font-bold text-foreground mb-2">Problems</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Choose your battleground. Each run brings you closer to your PB.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col lg:flex-row gap-4 mb-8">
|
||||
{/* Search */}
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search problems..."
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-card border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
cat === "All"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-secondary text-muted-foreground hover:text-foreground hover:bg-secondary/80"
|
||||
}`}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Difficulty Filter */}
|
||||
<div className="flex gap-2">
|
||||
{difficulties.map((diff) => (
|
||||
<button
|
||||
key={diff}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
diff === "All"
|
||||
? "bg-primary/10 text-primary border border-primary/30"
|
||||
: "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
|
||||
}`}
|
||||
>
|
||||
{diff}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* View Toggle */}
|
||||
<div className="flex gap-1 bg-card border border-border rounded-lg p-1">
|
||||
<button
|
||||
onClick={() => setViewMode("grid")}
|
||||
className={`p-2 rounded-md transition-all ${
|
||||
viewMode === "grid"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<Grid className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode("list")}
|
||||
className={`p-2 rounded-md transition-all ${
|
||||
viewMode === "list"
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "text-muted-foreground hover:text-foreground"
|
||||
}`}
|
||||
>
|
||||
<List className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Problem Grid */}
|
||||
<div
|
||||
className={`grid gap-4 ${
|
||||
viewMode === "grid"
|
||||
? "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
|
||||
: "grid-cols-1"
|
||||
}`}
|
||||
>
|
||||
{problems.map((problem, i) => (
|
||||
<ProblemCard key={problem.name} {...problem} index={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Problems;
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { LucideIcon } from "lucide-react";
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
trend?: string;
|
||||
index?: number;
|
||||
}
|
||||
|
||||
export default function ProfileStatCard({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
trend,
|
||||
index = 0,
|
||||
}: StatCardProps) {
|
||||
return (
|
||||
<div
|
||||
className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="p-2 rounded-lg bg-primary/10">
|
||||
<Icon className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
{trend && (
|
||||
<span
|
||||
className={`text-xs font-medium ${
|
||||
trend.startsWith("+")
|
||||
? "text-emerald-400"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{trend}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-foreground font-mono">{value}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">{label}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+229
-254
@@ -1,15 +1,15 @@
|
||||
import {
|
||||
Trophy,
|
||||
Timer,
|
||||
Zap,
|
||||
Target,
|
||||
Calendar,
|
||||
TrendingUp,
|
||||
Award,
|
||||
} from "lucide-react";
|
||||
import StatCard from "@/components/app/StatCard";
|
||||
"use client";
|
||||
|
||||
const Profile = () => {
|
||||
import { Trophy, Timer, Zap, Target, Calendar, Award } from "lucide-react";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
import ProfileStatCard from "@/app/profile/components/ProfileStatCard";
|
||||
|
||||
export default function Profile() {
|
||||
const user = {
|
||||
username: "speedmaster_x",
|
||||
joinDate: "Jan 2024",
|
||||
@@ -21,6 +21,218 @@ const Profile = () => {
|
||||
favoriteCategory: "Any%",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6 space-y-8">
|
||||
{/* Profile Header */}
|
||||
<Card className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
|
||||
|
||||
<CardContent className="relative p-8 flex flex-col md:flex-row gap-6">
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
<div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/60 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
|
||||
{user.username[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-sm font-bold glow-gold">
|
||||
#{user.rank}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold">{user.username}</h1>
|
||||
<p className="text-muted-foreground mb-3">
|
||||
Runner since {user.joinDate}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge>World Record Holder</Badge>
|
||||
<Badge variant="secondary">{user.favoriteCategory} Main</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PB */}
|
||||
<div className="text-right">
|
||||
<p className="text-4xl font-bold font-mono text-primary text-glow">
|
||||
{user.pb}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Personal Best</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<ProfileStatCard
|
||||
label="Total Runs"
|
||||
value={user.totalRuns.toLocaleString()}
|
||||
icon={Zap}
|
||||
index={0}
|
||||
/>
|
||||
<ProfileStatCard
|
||||
label="Clean Runs"
|
||||
value={user.cleanRuns.toString()}
|
||||
icon={Target}
|
||||
trend="+12 this week"
|
||||
index={1}
|
||||
/>
|
||||
<ProfileStatCard
|
||||
label="Global Rank"
|
||||
value={`#${user.rank}`}
|
||||
icon={Trophy}
|
||||
index={2}
|
||||
/>
|
||||
<ProfileStatCard
|
||||
label="Avg Time"
|
||||
value={user.avgTime}
|
||||
icon={Timer}
|
||||
index={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* Recent Runs */}
|
||||
<Card className="lg:col-span-2">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Recent Runs</CardTitle>
|
||||
<Button variant="link" size="sm">
|
||||
View all
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
{recentRuns.map((run, i) => (
|
||||
<div
|
||||
key={run.id}
|
||||
className="flex items-center justify-between rounded-lg px-4 py-3 bg-secondary/30 hover:bg-secondary/50 transition animate-fade-in opacity-0"
|
||||
style={{
|
||||
animationDelay: `${i * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
run.status === "clean" ? "bg-emerald-400" : "bg-red-400"
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium">{run.category}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{run.date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<p
|
||||
className={`font-mono font-semibold ${
|
||||
run.status === "reset"
|
||||
? "text-red-400"
|
||||
: "text-foreground"
|
||||
}`}
|
||||
>
|
||||
{run.time}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">
|
||||
{run.status}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Achievements + PB */}
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>Achievements</CardTitle>
|
||||
<span className="text-sm text-muted-foreground">5 / 6</span>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
{achievements.map((a, i) => (
|
||||
<div
|
||||
key={a.name}
|
||||
className={`flex items-center gap-3 rounded-lg p-3 animate-fade-in opacity-0 ${
|
||||
a.unlocked
|
||||
? "bg-primary/10 border border-primary/20"
|
||||
: "bg-secondary/30 opacity-50"
|
||||
}`}
|
||||
style={{
|
||||
animationDelay: `${i * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`p-2 rounded-lg ${
|
||||
a.unlocked
|
||||
? "bg-primary/20 text-primary"
|
||||
: "bg-secondary text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
<a.icon className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">{a.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{a.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{a.unlocked && (
|
||||
<div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
|
||||
<svg
|
||||
className="w-3 h-3 text-primary-foreground"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={3}
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* PB History */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>PB History</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{pbHistory.map((pb, i) => (
|
||||
<div key={i}>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-muted-foreground">{pb.time}</span>
|
||||
<span className="text-muted-foreground">{pb.date}</span>
|
||||
</div>
|
||||
{i !== pbHistory.length - 1 && (
|
||||
<Separator className="my-2" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------- data ---------------- */
|
||||
|
||||
const recentRuns = [
|
||||
{
|
||||
id: 1,
|
||||
@@ -105,246 +317,9 @@ const Profile = () => {
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6">
|
||||
{/* Profile Header */}
|
||||
<div className="bg-card border border-border rounded-2xl p-8 mb-8 relative overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
<div className="relative flex flex-col md:flex-row items-start md:items-center gap-6">
|
||||
{/* Avatar */}
|
||||
<div className="relative">
|
||||
<div className="w-24 h-24 rounded-2xl bg-linear-to-br from-primary to-primary/50 flex items-center justify-center text-3xl font-bold text-primary-foreground glow-purple">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-sm font-bold glow-gold">
|
||||
#1
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* User Info */}
|
||||
<div className="flex-1">
|
||||
<h1 className="text-3xl font-bold text-foreground mb-1">
|
||||
{user.username}
|
||||
</h1>
|
||||
<p className="text-muted-foreground mb-3">
|
||||
Runner since {user.joinDate}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<span className="px-3 py-1 rounded-lg bg-primary/10 text-primary text-sm font-medium border border-primary/30">
|
||||
World Record Holder
|
||||
</span>
|
||||
<span className="px-3 py-1 rounded-lg bg-secondary text-secondary-foreground text-sm">
|
||||
{user.favoriteCategory} Main
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<div className="text-right">
|
||||
<p className="text-4xl font-bold font-mono text-primary text-glow">
|
||||
{user.pb}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">Personal Best</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<StatCard
|
||||
label="Total Runs"
|
||||
value={user.totalRuns.toLocaleString()}
|
||||
icon={Zap}
|
||||
index={0}
|
||||
/>
|
||||
<StatCard
|
||||
label="Clean Runs"
|
||||
value={user.cleanRuns.toString()}
|
||||
icon={Target}
|
||||
trend="+12 this week"
|
||||
index={1}
|
||||
/>
|
||||
<StatCard
|
||||
label="Global Rank"
|
||||
value={`#${user.rank}`}
|
||||
icon={Trophy}
|
||||
index={2}
|
||||
/>
|
||||
<StatCard
|
||||
label="Avg Time"
|
||||
value={user.avgTime}
|
||||
icon={Timer}
|
||||
index={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
{/* Recent Runs */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-foreground">
|
||||
Recent Runs
|
||||
</h2>
|
||||
<button className="text-sm text-primary hover:underline">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{recentRuns.map((run, i) => (
|
||||
<div
|
||||
key={run.id}
|
||||
className="flex items-center justify-between py-3 px-4 rounded-lg bg-secondary/30 hover:bg-secondary/50 transition-colors animate-fade-in opacity-0"
|
||||
style={{
|
||||
animationDelay: `${i * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
run.status === "clean"
|
||||
? "bg-emerald-400"
|
||||
: "bg-red-400"
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">
|
||||
{run.category}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{run.date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p
|
||||
className={`font-mono font-semibold ${
|
||||
run.status === "reset"
|
||||
? "text-red-400"
|
||||
: "text-foreground"
|
||||
}`}
|
||||
>
|
||||
{run.time}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">
|
||||
{run.status}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Achievements */}
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-foreground">
|
||||
Achievements
|
||||
</h2>
|
||||
<span className="text-sm text-muted-foreground">5/6</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{achievements.map((achievement, i) => (
|
||||
<div
|
||||
key={achievement.name}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg transition-all animate-fade-in opacity-0 ${
|
||||
achievement.unlocked
|
||||
? "bg-primary/10 border border-primary/20"
|
||||
: "bg-secondary/30 opacity-50"
|
||||
}`}
|
||||
style={{
|
||||
animationDelay: `${i * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`p-2 rounded-lg ${
|
||||
achievement.unlocked
|
||||
? "bg-primary/20 text-primary"
|
||||
: "bg-secondary text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
<achievement.icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
achievement.unlocked
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{achievement.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{achievement.description}
|
||||
</p>
|
||||
</div>
|
||||
{achievement.unlocked && (
|
||||
<div className="w-5 h-5 rounded-full bg-primary flex items-center justify-center">
|
||||
<svg
|
||||
className="w-3 h-3 text-primary-foreground"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={3}
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PB History */}
|
||||
<div className="bg-card border border-border rounded-xl p-6 mt-4">
|
||||
<h2 className="text-xl font-bold text-foreground mb-4">
|
||||
PB History
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center py-2 border-b border-border">
|
||||
<span className="text-muted-foreground text-sm">2:34.21</span>
|
||||
<span className="text-xs text-muted-foreground">Today</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2 border-b border-border">
|
||||
<span className="text-muted-foreground text-sm">2:38.54</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
3 days ago
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2 border-b border-border">
|
||||
<span className="text-muted-foreground text-sm">2:45.12</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
1 week ago
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center py-2">
|
||||
<span className="text-muted-foreground text-sm">2:52.33</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
2 weeks ago
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
const pbHistory = [
|
||||
{ time: "2:34.21", date: "Today" },
|
||||
{ time: "2:38.54", date: "3 days ago" },
|
||||
{ time: "2:45.12", date: "1 week ago" },
|
||||
{ time: "2:52.33", date: "2 weeks ago" },
|
||||
];
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { RegisterPage } from "@/components/auth/RegisterPage";
|
||||
|
||||
export default function Page() {
|
||||
return <RegisterPage />;
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Folder, FolderMinus, FolderPlus, File } from "lucide-react";
|
||||
|
||||
type TreeNode = {
|
||||
type: "directory" | "file";
|
||||
uri: string;
|
||||
children?: TreeNode[];
|
||||
};
|
||||
|
||||
interface FileTreeProps {
|
||||
tree: TreeNode;
|
||||
level?: number; // for indentation
|
||||
}
|
||||
|
||||
export const FileTree: React.FC<FileTreeProps> = ({ tree, level = 0 }) => {
|
||||
const [expanded, setExpanded] = useState(
|
||||
tree.type !== "directory" || level === 0 ? true : false,
|
||||
);
|
||||
|
||||
const toggleExpand = () => {
|
||||
if (tree.type === "directory") {
|
||||
setExpanded(!expanded);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Directory/File Row */}
|
||||
<div
|
||||
onClick={toggleExpand}
|
||||
style={{
|
||||
paddingLeft: level * 20,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
cursor: tree.type === "directory" ? "pointer" : "default",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
{tree.type === "directory" ? (
|
||||
expanded ? (
|
||||
<FolderMinus size={16} className="mr-2" />
|
||||
) : (
|
||||
<FolderPlus size={16} className="mr-2" />
|
||||
)
|
||||
) : (
|
||||
<File size={16} className="mr-2" />
|
||||
)}
|
||||
{tree.uri}
|
||||
</div>
|
||||
|
||||
{/* Children */}
|
||||
{expanded &&
|
||||
tree.children?.map((child) => (
|
||||
<FileTree key={child.uri} tree={child} level={level + 1} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,48 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export type ChatMessage = {
|
||||
user: string;
|
||||
message: string;
|
||||
time: string;
|
||||
};
|
||||
|
||||
export default function RunChat({
|
||||
chatMessages,
|
||||
}: {
|
||||
chatMessages: ChatMessage[];
|
||||
}) {
|
||||
return (
|
||||
<Card className="flex flex-col flex-1">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-base">Chat</CardTitle>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{chatMessages.length} messages
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<Separator />
|
||||
|
||||
<CardContent className="flex flex-col flex-1 gap-3">
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto space-y-2">
|
||||
{chatMessages.map((msg, i) => (
|
||||
<div key={i} className="rounded-lg bg-secondary/50 p-2 text-sm">
|
||||
<span className="font-semibold text-foreground">{msg.user}</span>:{" "}
|
||||
<span className="text-muted-foreground">{msg.message}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">
|
||||
{msg.time}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<Input placeholder="Type a message…" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
|
||||
export type RunInfo = {
|
||||
category: "any%" | "100%";
|
||||
problems: number;
|
||||
currentAttempt: number;
|
||||
pbTime: string;
|
||||
worldRecord: string;
|
||||
};
|
||||
|
||||
export default function RunTimer({ runInfo }: { runInfo: RunInfo }) {
|
||||
return (
|
||||
<Card className="relative text-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
|
||||
<CardContent className="relative">
|
||||
<p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
|
||||
<p className="mt-2 font-mono text-sm text-muted-foreground">
|
||||
PB: {runInfo.pbTime} | Diff:{" "}
|
||||
<span className="text-red-400">+0:12</span>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
+38
-122
@@ -1,64 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { FileTree } from "@sinm/react-file-tree";
|
||||
import CodeMirror, { ReactCodeMirrorRef } from "@uiw/react-codemirror";
|
||||
import CodeMirror, { EditorState } from "@uiw/react-codemirror";
|
||||
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
type RunInfo = {
|
||||
category: "any%" | "100%";
|
||||
problems: number;
|
||||
currentAttempt: number;
|
||||
pbTime: string;
|
||||
worldRecord: string;
|
||||
};
|
||||
|
||||
type ChatMessage = {
|
||||
user: string;
|
||||
message: string;
|
||||
time: string;
|
||||
};
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import RunTimer, { RunInfo } from "./components/RunTimer";
|
||||
import RunChat, { ChatMessage } from "./components/RunChat";
|
||||
import { useState } from "react";
|
||||
import { FileTree } from "./components/FileTree";
|
||||
import { File } from "lucide-react";
|
||||
|
||||
export default function Run() {
|
||||
const splits = [
|
||||
{
|
||||
problemName: "Two Sum Dash",
|
||||
splitTime: "0:38",
|
||||
delta: "-0:04",
|
||||
isCompleted: true,
|
||||
pbTime: "0:42",
|
||||
},
|
||||
{
|
||||
problemName: "Binary Sprint",
|
||||
splitTime: "1:12",
|
||||
delta: "+0:02",
|
||||
isCompleted: true,
|
||||
pbTime: "0:32",
|
||||
},
|
||||
{
|
||||
problemName: "String Scramble",
|
||||
splitTime: "--:--",
|
||||
delta: undefined,
|
||||
isCompleted: false,
|
||||
isCurrent: true,
|
||||
pbTime: "0:55",
|
||||
},
|
||||
{
|
||||
problemName: "Linked List Rush",
|
||||
splitTime: "--:--",
|
||||
delta: undefined,
|
||||
isCompleted: false,
|
||||
pbTime: "1:24",
|
||||
},
|
||||
{
|
||||
problemName: "Stack Overflow",
|
||||
splitTime: "--:--",
|
||||
delta: undefined,
|
||||
isCompleted: false,
|
||||
pbTime: "1:42",
|
||||
},
|
||||
];
|
||||
|
||||
const runInfo: RunInfo = {
|
||||
category: "any%",
|
||||
problems: 5,
|
||||
@@ -67,7 +19,7 @@ export default function Run() {
|
||||
currentAttempt: 47,
|
||||
};
|
||||
|
||||
const chatMessages = [
|
||||
const chatMessages: ChatMessage[] = [
|
||||
{ user: "Alice", message: "Nice split!", time: "1:53" },
|
||||
{ user: "Bob", message: "Watch out for the string problem!", time: "1:54" },
|
||||
{ user: "Charlie", message: "PB incoming? 👀", time: "1:55" },
|
||||
@@ -76,34 +28,48 @@ export default function Run() {
|
||||
return (
|
||||
<div className="h-svh px-20 pt-24 pb-12 flex gap-8">
|
||||
{/* Editor */}
|
||||
<div className="h-full w-full bg-card rounded-2xl flex overflow-clip">
|
||||
<div className="h-full w-2xs border-r-2 p-5">
|
||||
<Card className="flex-1 overflow-hidden">
|
||||
<CardContent className="flex h-full">
|
||||
{/* File tree */}
|
||||
<div className="w-2xs border-r border-border">
|
||||
<FileTree
|
||||
tree={{
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
expanded: true,
|
||||
children: [
|
||||
{ type: "file", uri: "myfile.js" },
|
||||
{
|
||||
type: "file",
|
||||
uri: "myfile.js",
|
||||
type: "directory",
|
||||
uri: "my-app",
|
||||
children: [{ type: "file", uri: "myfile.js" }],
|
||||
},
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="h-full w-full p-5 pt-4">
|
||||
<header>myfile.js</header>
|
||||
<div className="pt-3 pb-5 w-full h-full">
|
||||
|
||||
{/* Code */}
|
||||
<div className="flex-1 pl-5 flex flex-col">
|
||||
<header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||
<File size={16} /> myfile.js
|
||||
</header>
|
||||
|
||||
<div className="flex-1 pt-3 pb-5">
|
||||
<CodeMirror
|
||||
readOnly
|
||||
className="w-full h-full"
|
||||
className="h-full w-full"
|
||||
value="yo"
|
||||
extensions={[]}
|
||||
extensions={[
|
||||
EditorState.transactionFilter.of((tr) => {
|
||||
if (tr.selection && tr.isUserEvent("select")) {
|
||||
return [];
|
||||
}
|
||||
return tr;
|
||||
}),
|
||||
]}
|
||||
theme={vscodeDark}
|
||||
onCreateEditor={(view) => {
|
||||
view.focus();
|
||||
|
||||
view.dispatch({
|
||||
selection: { anchor: 1 },
|
||||
scrollIntoView: true,
|
||||
@@ -112,63 +78,13 @@ export default function Run() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Timer & Chat */}
|
||||
<div className="flex flex-col gap-6 h-full">
|
||||
<Timer runInfo={runInfo} />
|
||||
<Chat chatMessages={chatMessages} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Timer({ runInfo }: { runInfo: RunInfo }) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-2xl p-6 text-center relative">
|
||||
<div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none rounded-t-2xl" />
|
||||
<div className="relative">
|
||||
<p className="timer-display text-primary text-4xl font-bold">1:52.34</p>
|
||||
<p className="text-muted-foreground mt-2 font-mono text-sm">
|
||||
PB: {runInfo.pbTime} | Diff:{" "}
|
||||
<span className="text-red-400">+0:12</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Chat({ chatMessages }: { chatMessages: ChatMessage[] }) {
|
||||
return (
|
||||
<div className="h-full flex flex-col flex-1 w-sm bg-card border border-border rounded-xl p-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="font-semibold text-foreground">Chat</h3>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{chatMessages.length} messages
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Messages area */}
|
||||
<div className="flex-1 overflow-y-auto space-y-2">
|
||||
{chatMessages.map((msg, idx) => (
|
||||
<div key={idx} className="bg-secondary/50 rounded-lg p-2">
|
||||
<span className="font-semibold text-foreground">{msg.user}</span>:{" "}
|
||||
<span className="text-muted-foreground">{msg.message}</span>
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
{msg.time}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div className="mt-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Type a message..."
|
||||
className="w-full rounded-lg border border-border p-2 text-sm bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<div className="flex flex-col gap-6 h-full w-sm">
|
||||
<RunTimer runInfo={runInfo} />
|
||||
<RunChat chatMessages={chatMessages} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { Eye } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { TableRow, TableCell } from "@/components/ui/table";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function LiveRunRow({
|
||||
index,
|
||||
username,
|
||||
problem,
|
||||
category,
|
||||
time,
|
||||
pace,
|
||||
status,
|
||||
}: any) {
|
||||
const pacePositive = pace.startsWith("+");
|
||||
const isTop = status === "pb";
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
className={cn(
|
||||
"opacity-0 animate-fade-in",
|
||||
isTop ? "bg-primary/5 hover:bg-primary/10" : "hover:bg-secondary/50",
|
||||
)}
|
||||
style={{
|
||||
animationDelay: `${index * 0.05}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<TableCell className="font-medium pl-5">
|
||||
{isTop ? `🔥 ${username}` : username}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span>{problem}</span>
|
||||
<Badge variant="outline" className="w-fit text-xs">
|
||||
{category}
|
||||
</Badge>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
className={`font-mono ${isTop ? "text-primary font-bold" : ""}`}
|
||||
>
|
||||
{time}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Badge
|
||||
className={
|
||||
pacePositive
|
||||
? "bg-red-500/10 text-red-400"
|
||||
: "bg-green-500/10 text-green-400"
|
||||
}
|
||||
>
|
||||
{pace}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
status === "pb"
|
||||
? "bg-green-500"
|
||||
: status === "danger"
|
||||
? "bg-red-500"
|
||||
: "bg-emerald-400"
|
||||
}`}
|
||||
/>
|
||||
Live
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="text-right pr-5">
|
||||
<Button size="sm" variant={isTop ? "default" : "ghost"}>
|
||||
<Eye className="h-4 w-4 mr-1" />
|
||||
Watch
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import { Zap, Users, Timer, TrendingUp, Eye } from "lucide-react";
|
||||
|
||||
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TableCell,
|
||||
} from "@/components/ui/table";
|
||||
import { cn } from "@/lib/utils";
|
||||
import LiveRunRow from "./components/LiveRunNow";
|
||||
import StatCard from "@/components/app/StatCard";
|
||||
|
||||
/* ---------------- mock data ---------------- */
|
||||
|
||||
const liveRuns = [
|
||||
{
|
||||
id: 1,
|
||||
username: "speedmaster_x",
|
||||
problem: "Two Sum Dash",
|
||||
category: "Any%",
|
||||
time: "1:52.34",
|
||||
pace: "-0:03",
|
||||
status: "pb",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: "algo_ninja",
|
||||
problem: "Binary Sprint",
|
||||
category: "Any%",
|
||||
time: "2:04.11",
|
||||
pace: "+0:05",
|
||||
status: "normal",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
username: "stackattack",
|
||||
problem: "String Scramble",
|
||||
category: "Easy",
|
||||
time: "0:48.92",
|
||||
pace: "-0:01",
|
||||
status: "pb",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
username: "reset_king",
|
||||
problem: "Linked List Rush",
|
||||
category: "Any%",
|
||||
time: "1:31.77",
|
||||
pace: "+0:12",
|
||||
status: "danger",
|
||||
},
|
||||
];
|
||||
|
||||
/* ---------------- page ---------------- */
|
||||
|
||||
export default function LiveRuns() {
|
||||
// Sort top runners (status === 'pb') to the top
|
||||
const sortedRuns = [...liveRuns].sort((a, b) => {
|
||||
if (a.status === "pb" && b.status !== "pb") return -1;
|
||||
if (a.status !== "pb" && b.status === "pb") return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pt-24 pb-16">
|
||||
<div className="container mx-auto px-6 space-y-8">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold">Live Runs</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Watch runners compete in real time. Every second counts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<StatCard icon={Zap} label="Live Runs" value="42" index={0} />
|
||||
<StatCard icon={Users} label="Active Runners" value="39" index={1} />
|
||||
<StatCard icon={Timer} label="Avg Runtime" value="1:47" index={2} />
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="PB Pace Runs"
|
||||
value="7"
|
||||
index={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{["Any%", "100%", "Easy", "Hard"].map((cat) => (
|
||||
<Badge key={cat} variant="outline" className="cursor-pointer">
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
|
||||
<Badge className="bg-primary/10 text-primary">🔥 PB Pace</Badge>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="pl-5">Runner</TableHead>
|
||||
<TableHead>Problem</TableHead>
|
||||
<TableHead>Time</TableHead>
|
||||
<TableHead>Pace</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead className="pr-5" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{sortedRuns.map((run, index) => (
|
||||
<LiveRunRow key={run.id} {...run} index={index} />
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Timer, Trophy, User, Zap } from "lucide-react";
|
||||
import { Radio, Trophy, User, Zap } from "lucide-react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Avatar, AvatarFallback } from "../ui/avatar";
|
||||
|
||||
const navs = [
|
||||
{
|
||||
@@ -18,13 +19,8 @@ const navs = [
|
||||
},
|
||||
{
|
||||
link: "/runs",
|
||||
icon: Timer,
|
||||
name: "Runs",
|
||||
},
|
||||
{
|
||||
link: "/profile",
|
||||
icon: User,
|
||||
name: "Profile",
|
||||
icon: Radio,
|
||||
name: "Live",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -51,7 +47,7 @@ const Navbar = () => {
|
||||
</Link>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="hidden md:flex items-center gap-1">
|
||||
<div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-1">
|
||||
{navs.map(({ link, icon: Icon, name }) => (
|
||||
<Link
|
||||
key={link}
|
||||
@@ -69,26 +65,11 @@ const Navbar = () => {
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="hidden sm:flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-semibold transition-all duration-300 hover:scale-105 glow-purple hover:glow-purple-intense">
|
||||
Start Run
|
||||
</button>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
<button className="md:hidden p-2 text-muted-foreground hover:text-foreground">
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<Avatar onClick={() => {}}>
|
||||
<AvatarFallback>
|
||||
<User className="m-2" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Check, Minus } from "lucide-react";
|
||||
|
||||
interface SplitRowProps {
|
||||
problemName: string;
|
||||
splitTime: string;
|
||||
delta?: string;
|
||||
isCompleted: boolean;
|
||||
isCurrent?: boolean;
|
||||
pbTime?: string;
|
||||
}
|
||||
|
||||
const SplitRow = ({ problemName, splitTime, delta, isCompleted, isCurrent, pbTime }: SplitRowProps) => {
|
||||
const getDeltaColor = (delta?: string) => {
|
||||
if (!delta) return "text-muted-foreground";
|
||||
if (delta.startsWith("-")) return "text-emerald-400";
|
||||
if (delta.startsWith("+")) return "text-red-400";
|
||||
return "text-muted-foreground";
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center justify-between py-3 px-4 rounded-lg transition-all duration-300 ${
|
||||
isCurrent
|
||||
? 'bg-primary/10 border border-primary/30'
|
||||
: isCompleted
|
||||
? 'bg-secondary/50'
|
||||
: 'bg-card'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Status indicator */}
|
||||
<div className={`w-6 h-6 rounded-full flex items-center justify-center ${
|
||||
isCompleted
|
||||
? 'bg-emerald-500/20 text-emerald-400'
|
||||
: isCurrent
|
||||
? 'bg-primary/20 text-primary pulse-live'
|
||||
: 'bg-secondary text-muted-foreground'
|
||||
}`}>
|
||||
{isCompleted ? <Check className="h-3.5 w-3.5" /> : <Minus className="h-3.5 w-3.5" />}
|
||||
</div>
|
||||
|
||||
<span className={`font-medium ${isCurrent ? 'text-primary' : isCompleted ? 'text-foreground' : 'text-muted-foreground'}`}>
|
||||
{problemName}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Delta */}
|
||||
{isCompleted && delta && (
|
||||
<span className={`split-time ${getDeltaColor(delta)}`}>
|
||||
{delta}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Split time */}
|
||||
<span className={`split-time min-w-[70px] text-right ${
|
||||
isCompleted ? 'text-foreground' : 'text-muted-foreground'
|
||||
}`}>
|
||||
{isCompleted ? splitTime : pbTime || '--:--'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SplitRow;
|
||||
@@ -1,35 +1,29 @@
|
||||
import { LucideIcon } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
interface StatCardProps {
|
||||
export default function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
index = 0,
|
||||
}: {
|
||||
icon: any;
|
||||
label: string;
|
||||
value: string;
|
||||
icon: LucideIcon;
|
||||
trend?: string;
|
||||
index?: number;
|
||||
}
|
||||
|
||||
const StatCard = ({ label, value, icon: Icon, trend, index = 0 }: StatCardProps) => {
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="bg-card border border-border rounded-xl p-5 card-hover animate-fade-in opacity-0"
|
||||
style={{ animationDelay: `${index * 0.1}s`, animationFillMode: 'forwards' }}
|
||||
<Card
|
||||
className="opacity-0 animate-fade-in"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`,
|
||||
animationFillMode: "forwards",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="p-2 rounded-lg bg-primary/10">
|
||||
<Icon className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
{trend && (
|
||||
<span className={`text-xs font-medium ${
|
||||
trend.startsWith('+') ? 'text-emerald-400' : 'text-muted-foreground'
|
||||
}`}>
|
||||
{trend}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-2xl font-bold text-foreground font-mono">{value}</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">{label}</p>
|
||||
</div>
|
||||
<CardHeader className="pb-2 text-center">
|
||||
<Icon className="mx-auto h-5 w-5 text-primary" />
|
||||
<CardTitle className="font-mono text-2xl">{value}</CardTitle>
|
||||
<p className="text-xs text-muted-foreground">{label}</p>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatCard;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Github, Mail } from "lucide-react";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
export default function ContinueWith() {
|
||||
return (
|
||||
<>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<span className="w-full border-t border-border" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-xs uppercase">
|
||||
<span className="bg-card px-2 text-muted-foreground">
|
||||
Or continue with
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 animate-fade-in stagger-4">
|
||||
<Button variant="outline">
|
||||
<Github className="h-4 w-4" />
|
||||
GitHub
|
||||
</Button>
|
||||
<Button variant="outline" className="animate-fade-in stagger-5">
|
||||
<Mail className="h-4 w-4" />
|
||||
Google
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import {
|
||||
ArrowRight,
|
||||
Github,
|
||||
KeyRound,
|
||||
LogIn,
|
||||
Mail,
|
||||
UserRound,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import ContinueWith from "./ContinueWith";
|
||||
|
||||
export function LoginPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
||||
{/* Background glow */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at top, hsl(270 91% 45% / 0.25) 0%, transparent 60%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card className="w-full max-w-md relative">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in stagger-1">
|
||||
<LogIn className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl animate-fade-in stagger-1">
|
||||
Welcome back
|
||||
</CardTitle>
|
||||
<CardDescription className="animate-fade-in stagger-2">
|
||||
Log in to continue chasing your personal best.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2 animate-fade-in">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="[email protected]" />
|
||||
</div>
|
||||
<div className="space-y-2 animate-fade-in stagger-1">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input id="password" type="password" placeholder="••••••••" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full animate-fade-in stagger-2"
|
||||
variant="secondary"
|
||||
>
|
||||
Log In
|
||||
</Button>
|
||||
|
||||
<ContinueWith />
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Don't have an account?{" "}
|
||||
<Link href="/register" className="text-primary hover:underline">
|
||||
Create one
|
||||
</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { ArrowRight, Github, Mail, UserPlus, Zap } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import ContinueWith from "./ContinueWith";
|
||||
|
||||
export function RegisterPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
||||
{/* Background glow */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at bottom, hsl(270 91% 75% / 0.18) 0%, transparent 60%)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card className="w-full max-w-md relative">
|
||||
<CardHeader className="text-center">
|
||||
<div className="mx-auto mb-4 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center animate-fade-in">
|
||||
<UserPlus className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl animate-fade-in stagger-1">
|
||||
Create your account
|
||||
</CardTitle>
|
||||
<CardDescription className="animate-fade-in stagger-2">
|
||||
Join the grind. Track runs, set records, compete globally.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2 animate-fade-in">
|
||||
<Label htmlFor="username">Username</Label>
|
||||
<Input id="username" placeholder="speedrunner67" />
|
||||
</div>
|
||||
<div className="space-y-2 animate-fade-in stagger-1">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" placeholder="[email protected]" />
|
||||
</div>
|
||||
<div className="space-y-2 animate-fade-in stagger-2">
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input id="password" type="password" placeholder="••••••••" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full animate-fade-in stagger-3"
|
||||
variant="secondary"
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
|
||||
<ContinueWith />
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Already have an account?{" "}
|
||||
<Link href="/login" className="text-primary hover:underline">
|
||||
Log in
|
||||
</Link>
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Avatar as AvatarPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
|
||||
size?: "default" | "sm" | "lg"
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn("aspect-square size-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="avatar-badge"
|
||||
className={cn(
|
||||
"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
|
||||
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
||||
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
||||
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group"
|
||||
className={cn(
|
||||
"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroupCount({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group-count"
|
||||
className={cn(
|
||||
"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
AvatarBadge,
|
||||
AvatarGroup,
|
||||
AvatarGroupCount,
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Slot } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 [a&]:hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"span"> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot.Root : "span"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
data-variant={variant}
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -1,37 +1,36 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { Slot } from "radix-ui";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-semibold transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground hover:bg-primary/90 glow-purple hover:glow-purple-intense",
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border-2 border-primary/50 bg-transparent text-primary hover:bg-primary/10 hover:border-primary",
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-primary dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:text-primary",
|
||||
ghost:
|
||||
"text-muted-foreground hover:text-foreground hover:bg-secondary",
|
||||
link:
|
||||
"text-primary underline-offset-4 hover:underline",
|
||||
hero:
|
||||
"bg-primary text-primary-foreground px-8 py-6 text-lg font-bold glow-purple hover:glow-purple-intense hover:scale-105",
|
||||
"hero-outline":
|
||||
"border-2 border-primary/50 bg-transparent text-primary px-8 py-6 text-lg font-bold hover:bg-primary/10 hover:border-primary hover:scale-105",
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
hero: "transition-colors duration-300 hover:text-primary text-glow",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-12 rounded-lg px-8",
|
||||
xl: "h-14 rounded-lg px-10 text-base",
|
||||
icon: "h-10 w-10",
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
p2: "rounded-md p-2",
|
||||
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm": "size-8",
|
||||
"icon-lg": "size-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@@ -41,18 +40,27 @@ const buttonVariants = cva(
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean;
|
||||
}) {
|
||||
const Comp = asChild ? Slot.Root : "button";
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -0,0 +1,24 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Label as LabelPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -0,0 +1,127 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
MoreHorizontalIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { buttonVariants, type Button } from "@/components/ui/button"
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex flex-row items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) {
|
||||
return (
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
buttonVariants({
|
||||
variant: isActive ? "outline" : "ghost",
|
||||
size,
|
||||
}),
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<span className="hidden sm:block">Previous</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink>) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="hidden sm:block">Next</span>
|
||||
<ChevronRightIcon />
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn("flex size-9 items-center justify-center", className)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon className="size-4" />
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationLink,
|
||||
PaginationItem,
|
||||
PaginationPrevious,
|
||||
PaginationNext,
|
||||
PaginationEllipsis,
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Separator as SeparatorPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
@@ -0,0 +1,116 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="table-container"
|
||||
className="relative w-full overflow-x-auto"
|
||||
>
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn(
|
||||
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Tabs as TabsPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Tabs({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
||||
return (
|
||||
<TabsPrimitive.Root
|
||||
data-slot="tabs"
|
||||
data-orientation={orientation}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const tabsListVariants = cva(
|
||||
"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-muted",
|
||||
line: "gap-1 bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function TabsList({
|
||||
className,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
||||
VariantProps<typeof tabsListVariants>) {
|
||||
return (
|
||||
<TabsPrimitive.List
|
||||
data-slot="tabs-list"
|
||||
data-variant={variant}
|
||||
className={cn(tabsListVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
||||
return (
|
||||
<TabsPrimitive.Trigger
|
||||
data-slot="tabs-trigger"
|
||||
className={cn(
|
||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
|
||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
|
||||
"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TabsContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
||||
return (
|
||||
<TabsPrimitive.Content
|
||||
data-slot="tabs-content"
|
||||
className={cn("flex-1 outline-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { type VariantProps } from "class-variance-authority"
|
||||
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { toggleVariants } from "@/components/ui/toggle"
|
||||
|
||||
const ToggleGroupContext = React.createContext<
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
}
|
||||
>({
|
||||
size: "default",
|
||||
variant: "default",
|
||||
spacing: 0,
|
||||
})
|
||||
|
||||
function ToggleGroup({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
spacing = 0,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants> & {
|
||||
spacing?: number
|
||||
}) {
|
||||
return (
|
||||
<ToggleGroupPrimitive.Root
|
||||
data-slot="toggle-group"
|
||||
data-variant={variant}
|
||||
data-size={size}
|
||||
data-spacing={spacing}
|
||||
style={{ "--gap": spacing } as React.CSSProperties}
|
||||
className={cn(
|
||||
"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ToggleGroupContext.Provider value={{ variant, size, spacing }}>
|
||||
{children}
|
||||
</ToggleGroupContext.Provider>
|
||||
</ToggleGroupPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function ToggleGroupItem({
|
||||
className,
|
||||
children,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
const context = React.useContext(ToggleGroupContext)
|
||||
|
||||
return (
|
||||
<ToggleGroupPrimitive.Item
|
||||
data-slot="toggle-group-item"
|
||||
data-variant={context.variant || variant}
|
||||
data-size={context.size || size}
|
||||
data-spacing={context.spacing}
|
||||
className={cn(
|
||||
toggleVariants({
|
||||
variant: context.variant || variant,
|
||||
size: context.size || size,
|
||||
}),
|
||||
"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
|
||||
"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</ToggleGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { ToggleGroup, ToggleGroupItem }
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { Toggle as TogglePrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const toggleVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-transparent",
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-2 min-w-9",
|
||||
sm: "h-8 px-1.5 min-w-8",
|
||||
lg: "h-10 px-2.5 min-w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Toggle({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
...props
|
||||
}: React.ComponentProps<typeof TogglePrimitive.Root> &
|
||||
VariantProps<typeof toggleVariants>) {
|
||||
return (
|
||||
<TogglePrimitive.Root
|
||||
data-slot="toggle"
|
||||
className={cn(toggleVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Toggle, toggleVariants }
|
||||
Reference in New Issue
Block a user