From 7a368bebe2a1479dc4c5ab65e94fd19d24dad2d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com> Date: Sat, 4 Feb 2023 22:54:51 +0100 Subject: [PATCH] Ajout puzzles & composants --- app/dashboard/layout.tsx | 4 ++-- app/dashboard/puzzles/page.tsx | 20 ++++++++++++++------ app/layout.tsx | 2 +- ui/ErrorMessage.tsx | 3 +++ ui/Input.tsx | 27 +++++++++++++++++++++++++++ ui/Label.tsx | 26 ++++++++++++++++++++++++++ ui/Tips.tsx | 23 +++++++++++++++++++++++ ui/ToHTML.tsx | 12 ++++++++++++ ui/dashboard/Sidenav.tsx | 2 +- 9 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 ui/ErrorMessage.tsx create mode 100644 ui/Input.tsx create mode 100644 ui/Label.tsx create mode 100644 ui/Tips.tsx create mode 100644 ui/ToHTML.tsx 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 ( -
+