diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx index 0199c2c..fb7d88e 100644 --- a/app/dashboard/layout.tsx +++ b/app/dashboard/layout.tsx @@ -3,9 +3,9 @@ import { type ReactNode } from 'react'; export default function Layout({ children }: { children: ReactNode }) { return ( -
+
-
{children}
+
{children}
); } diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx index a4d4fcc..b09e966 100644 --- a/app/dashboard/puzzles/page.tsx +++ b/app/dashboard/puzzles/page.tsx @@ -1,11 +1,19 @@ +import Input from '@/ui/Input'; +import ToHTML from '@/ui/ToHTML'; + export default function Page() { return ( -
-
-

- Amuse toi avec Next.js et{' '} - Tailwindcss ! -

+
+
+

Titre du puzzle

+

Chapitre 2 - Les boucles à boucler

+
+
+ +
+
+ +
); diff --git a/app/layout.tsx b/app/layout.tsx index 80bf7f9..32f6f6e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,7 +5,7 @@ import { type ReactNode } from 'react'; export default function RootLayout({ children }: { children: ReactNode }) { return ( - +
{children}
diff --git a/ui/ErrorMessage.tsx b/ui/ErrorMessage.tsx new file mode 100644 index 0000000..ad1747a --- /dev/null +++ b/ui/ErrorMessage.tsx @@ -0,0 +1,3 @@ +export default function ErrorMessage({ children }: { children: React.ReactNode }) { + return

{children}

; +} diff --git a/ui/Input.tsx b/ui/Input.tsx new file mode 100644 index 0000000..0138e82 --- /dev/null +++ b/ui/Input.tsx @@ -0,0 +1,27 @@ +import { forwardRef } from 'react'; +import ErrorMessage from './ErrorMessage'; +import Label from './Label'; + +const Input = forwardRef< + HTMLInputElement, + React.InputHTMLAttributes & { + label: React.ReactNode; + error?: React.ReactNode; + description?: React.ReactNode; + } +>(({ className, label, description, error, ...props }, ref) => ( + <> + + {error && {error}} + +)); + +Input.displayName = 'Input'; + +export default Input; diff --git a/ui/Label.tsx b/ui/Label.tsx new file mode 100644 index 0000000..1c77428 --- /dev/null +++ b/ui/Label.tsx @@ -0,0 +1,26 @@ +import { cn } from '@/lib/utils'; + +export default function Label({ + label, + description, + className, + required, + children +}: { + className?: string; + label: React.ReactNode; + description?: React.ReactNode; + required?: boolean; + children: React.ReactNode; +}) { + return ( + + ); +} diff --git a/ui/Tips.tsx b/ui/Tips.tsx new file mode 100644 index 0000000..5642f1a --- /dev/null +++ b/ui/Tips.tsx @@ -0,0 +1,23 @@ +import { cn } from '@/lib/utils'; + +interface TipsProps { + className?: string; + kind?: 'success' | 'error' | 'warning' | 'info'; + text: string; +} + +export default function Tips({ className, kind = 'info', text }: TipsProps) { + return ( +
+

{text}

+
+ ); +} diff --git a/ui/ToHTML.tsx b/ui/ToHTML.tsx new file mode 100644 index 0000000..cf19df9 --- /dev/null +++ b/ui/ToHTML.tsx @@ -0,0 +1,12 @@ +import { cn } from '@/lib/utils'; + +interface ToHTMLProps { + html: string; + className?: string; +} + +export default function ToHTML({ html, className }: ToHTMLProps) { + return ( +
+ ); +} diff --git a/ui/dashboard/Sidenav.tsx b/ui/dashboard/Sidenav.tsx index 4397349..f1e2bea 100644 --- a/ui/dashboard/Sidenav.tsx +++ b/ui/dashboard/Sidenav.tsx @@ -7,7 +7,7 @@ import AppLink from '../AppLink'; export default function Sidenav() { return ( -
+