+
+
{'/'}
);
};
diff --git a/src/components/pages/Todos.tsx b/src/components/pages/Todos.tsx
index d376556..7789de8 100644
--- a/src/components/pages/Todos.tsx
+++ b/src/components/pages/Todos.tsx
@@ -1,8 +1,13 @@
+import TodoBoard from '../TodoBoard';
+import { ListedComponentWrapper } from '@/components/ui/Wrappers';
+
const Todos = () => {
return (
-
-
Todos
-
+
+
+
+
+
);
};
diff --git a/src/components/ui/Wrappers.tsx b/src/components/ui/Wrappers.tsx
new file mode 100644
index 0000000..552fe1b
--- /dev/null
+++ b/src/components/ui/Wrappers.tsx
@@ -0,0 +1,27 @@
+interface WrapperProps {
+ children: React.ReactNode | React.ReactNode[];
+}
+
+export const ContainerWrapper = ({ children }: WrapperProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const ListedComponentWrapper = ({ children }: WrapperProps) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const FullscreenWrapper = ({ children }: WrapperProps) => {
+ return
{children}
;
+};
+
+export const ColumnWrapper = ({ children }: WrapperProps) => {
+ return
{children}
;
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..1e6c14a
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps
) {
+ return (
+
+
+
+
+
+ );
+}
+
+export { Checkbox };
diff --git a/src/styles/index.css b/src/styles/index.css
index 22e5048..d8f22ef 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,6 +1,10 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard.min.css');
@import 'tailwindcss';
@import 'tw-animate-css';
+@plugin 'tailwind-scrollbar' {
+ nocompatible: true;
+ preferredstrategy: 'pseudoelements';
+}
@custom-variant dark (&:is(.dark *));
diff --git a/yarn.lock b/yarn.lock
index e42a521..fd701a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -552,6 +552,39 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/primitive@npm:1.1.3":
+ version: 1.1.3
+ resolution: "@radix-ui/primitive@npm:1.1.3"
+ checksum: 10c0/88860165ee7066fa2c179f32ffcd3ee6d527d9dcdc0e8be85e9cb0e2c84834be8e3c1a976c74ba44b193f709544e12f54455d892b28e32f0708d89deda6b9f1d
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-checkbox@npm:^1.3.3":
+ version: 1.3.3
+ resolution: "@radix-ui/react-checkbox@npm:1.3.3"
+ dependencies:
+ "@radix-ui/primitive": "npm:1.1.3"
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-context": "npm:1.1.2"
+ "@radix-ui/react-presence": "npm:1.1.5"
+ "@radix-ui/react-primitive": "npm:2.1.3"
+ "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+ "@radix-ui/react-use-previous": "npm:1.1.1"
+ "@radix-ui/react-use-size": "npm: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
+ checksum: 10c0/5eeb78e37a6c9611a638a80b309c931dd6f1f8968357ab2abb453505392fa1397491441447ca2d5f4381faaac7fab2dc84c780e8ce27d931bd203fa014088b74
+ languageName: node
+ linkType: hard
+
"@radix-ui/react-compose-refs@npm:1.1.2":
version: 1.1.2
resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
@@ -565,7 +598,59 @@ __metadata:
languageName: node
linkType: hard
-"@radix-ui/react-slot@npm:^1.2.3":
+"@radix-ui/react-context@npm:1.1.2":
+ version: 1.1.2
+ resolution: "@radix-ui/react-context@npm:1.1.2"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/cece731f8cc25d494c6589cc681e5c01a93867d895c75889973afa1a255f163c286e390baa7bc028858eaabe9f6b57270d0ca6377356f652c5557c1c7a41ccce
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-presence@npm:1.1.5":
+ version: 1.1.5
+ resolution: "@radix-ui/react-presence@npm:1.1.5"
+ dependencies:
+ "@radix-ui/react-compose-refs": "npm:1.1.2"
+ "@radix-ui/react-use-layout-effect": "npm: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
+ checksum: 10c0/d0e61d314250eeaef5369983cb790701d667f51734bafd98cf759072755562018052c594e6cdc5389789f4543cb0a4d98f03ff4e8f37338d6b5bf51a1700c1d1
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-primitive@npm:2.1.3":
+ version: 2.1.3
+ resolution: "@radix-ui/react-primitive@npm:2.1.3"
+ dependencies:
+ "@radix-ui/react-slot": "npm: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
+ checksum: 10c0/fdff9b84913bb4172ef6d3af7442fca5f9bba5f2709cba08950071f819d7057aec3a4a2d9ef44cf9cbfb8014d02573c6884a04cff175895823aaef809ebdb034
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.2.3":
version: 1.2.3
resolution: "@radix-ui/react-slot@npm:1.2.3"
dependencies:
@@ -580,6 +665,78 @@ __metadata:
languageName: node
linkType: hard
+"@radix-ui/react-use-controllable-state@npm:1.2.2":
+ version: 1.2.2
+ resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
+ dependencies:
+ "@radix-ui/react-use-effect-event": "npm:0.0.2"
+ "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/f55c4b06e895293aed4b44c9ef26fb24432539f5346fcd6519c7745800535b571058685314e83486a45bf61dc83887e24826490d3068acc317fb0a9010516e63
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-use-effect-event@npm:0.0.2":
+ version: 0.0.2
+ resolution: "@radix-ui/react-use-effect-event@npm:0.0.2"
+ dependencies:
+ "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/e84ff72a3e76c5ae9c94941028bb4b6472f17d4104481b9eab773deab3da640ecea035e54da9d6f4df8d84c18ef6913baf92b7511bee06930dc58bd0c0add417
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-use-layout-effect@npm:1.1.1":
+ version: 1.1.1
+ resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/9f98fdaba008dfc58050de60a77670b885792df473cf82c1cef8daee919a5dd5a77d270209f5f0b0abfaac78cb1627396e3ff56c81b735be550409426fe8b040
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-use-previous@npm:1.1.1":
+ version: 1.1.1
+ resolution: "@radix-ui/react-use-previous@npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/52f1089d941491cd59b7f52a5679a14e9381711419a0557ce0f3bc9a4c117078224efec54dcced41a3653a13a386a7b6ec75435d61a273e8b9f5d00235f2b182
+ languageName: node
+ linkType: hard
+
+"@radix-ui/react-use-size@npm:1.1.1":
+ version: 1.1.1
+ resolution: "@radix-ui/react-use-size@npm:1.1.1"
+ dependencies:
+ "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+ peerDependencies:
+ "@types/react": "*"
+ react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 10c0/851d09a816f44282e0e9e2147b1b571410174cc048703a50c4fa54d672de994fd1dfff1da9d480ecfd12c77ae8f48d74f01adaf668f074156b8cd0043c6c21d8
+ languageName: node
+ linkType: hard
+
"@rolldown/pluginutils@npm:1.0.0-beta.35":
version: 1.0.0-beta.35
resolution: "@rolldown/pluginutils@npm:1.0.0-beta.35"
@@ -1089,6 +1246,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/prismjs@npm:^1.26.0":
+ version: 1.26.5
+ resolution: "@types/prismjs@npm:1.26.5"
+ checksum: 10c0/5619cb449e0d8df098c8759d6f47bf8fdd510abf5dbdfa999e55c6a2545efbd1e209cc85a33d8d9f4ff2898089a1a6d9a70737c9baffaae635c46852c40d384a
+ languageName: node
+ linkType: hard
+
"@types/react-dom@npm:^19.1.7":
version: 19.1.9
resolution: "@types/react-dom@npm:19.1.9"
@@ -1455,7 +1619,7 @@ __metadata:
languageName: node
linkType: hard
-"clsx@npm:^2.1.1":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.1":
version: 2.1.1
resolution: "clsx@npm:2.1.1"
checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -1944,6 +2108,7 @@ __metadata:
dependencies:
"@base-ui-components/react": "npm:^1.0.0-beta.3"
"@eslint/js": "npm:^9.33.0"
+ "@radix-ui/react-checkbox": "npm:^1.3.3"
"@radix-ui/react-slot": "npm:^1.2.3"
"@tabler/icons-react": "npm:^3.35.0"
"@tailwindcss/vite": "npm:^4.1.13"
@@ -1963,6 +2128,7 @@ __metadata:
react-dom: "npm:^19.1.1"
react-router-dom: "npm:^7.9.1"
tailwind-merge: "npm:^3.3.1"
+ tailwind-scrollbar: "npm:^4.0.2"
tailwindcss: "npm:^4.1.13"
tw-animate-css: "npm:^1.3.8"
typescript: "npm:~5.8.3"
@@ -2729,6 +2895,18 @@ __metadata:
languageName: node
linkType: hard
+"prism-react-renderer@npm:^2.4.1":
+ version: 2.4.1
+ resolution: "prism-react-renderer@npm:2.4.1"
+ dependencies:
+ "@types/prismjs": "npm:^1.26.0"
+ clsx: "npm:^2.0.0"
+ peerDependencies:
+ react: ">=16.0.0"
+ checksum: 10c0/ebbe8feb975224344bbdd046b3a937d121592dbe4b8f22ba0be31f5af37b9a8219f441138ef6cab1c5b96f2aa6b529015200959f7e5e85b60ca69c81d35edcd4
+ languageName: node
+ linkType: hard
+
"proc-log@npm:^5.0.0":
version: 5.0.0
resolution: "proc-log@npm:5.0.0"
@@ -3088,6 +3266,17 @@ __metadata:
languageName: node
linkType: hard
+"tailwind-scrollbar@npm:^4.0.2":
+ version: 4.0.2
+ resolution: "tailwind-scrollbar@npm:4.0.2"
+ dependencies:
+ prism-react-renderer: "npm:^2.4.1"
+ peerDependencies:
+ tailwindcss: 4.x
+ checksum: 10c0/942dd9ec381e09f65220fb9370f6ec1de137e88b9c7a043ee1eafd0397da1d0c4a9780e833ed159892106da820611867d358c73e05509746329cd0414102c587
+ languageName: node
+ linkType: hard
+
"tailwindcss@npm:4.1.13, tailwindcss@npm:^4.1.13":
version: 4.1.13
resolution: "tailwindcss@npm:4.1.13"