From 9956bf0db7324dffe68bdd18e9ff0e8b3ba2968a 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 20:34:15 +0100 Subject: [PATCH] Ajout des routes dashboard/ & SideNav --- .prettierrc | 7 ----- app/dashboard/badges/page.tsx | 12 ++++++++ app/dashboard/layout.tsx | 11 +++++++ app/dashboard/page.tsx | 12 ++++++++ app/dashboard/puzzles/page.tsx | 12 ++++++++ app/dashboard/ranking/page.tsx | 12 ++++++++ app/dashboard/settings/page.tsx | 12 ++++++++ app/layout.tsx | 9 +++--- app/page.tsx | 9 ++++-- lib/nav-items.ts | 44 +++++++++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 54 +++++++++++++++++++++++++++++++++ prettier.config.js | 8 +++++ tailwind.config.js | 7 ++++- ui/AppLink.tsx | 15 +++++++++ ui/dashboard/Sidenav.tsx | 53 ++++++++++++++++++++++++++++++++ 16 files changed, 263 insertions(+), 15 deletions(-) delete mode 100644 .prettierrc create mode 100644 app/dashboard/badges/page.tsx create mode 100644 app/dashboard/layout.tsx create mode 100644 app/dashboard/page.tsx create mode 100644 app/dashboard/puzzles/page.tsx create mode 100644 app/dashboard/ranking/page.tsx create mode 100644 app/dashboard/settings/page.tsx create mode 100644 lib/nav-items.ts create mode 100644 prettier.config.js create mode 100644 ui/AppLink.tsx create mode 100644 ui/dashboard/Sidenav.tsx diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 646b17c..0000000 --- a/.prettierrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "semi": true, - "tabWidth": 2, - "printWidth": 100, - "singleQuote": true, - "trailingComma": "none" -} diff --git a/app/dashboard/badges/page.tsx b/app/dashboard/badges/page.tsx new file mode 100644 index 0000000..cb8cab1 --- /dev/null +++ b/app/dashboard/badges/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
+
+

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

+
+
+ ); +} diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx new file mode 100644 index 0000000..0199c2c --- /dev/null +++ b/app/dashboard/layout.tsx @@ -0,0 +1,11 @@ +import Sidenav from '@/ui/dashboard/Sidenav'; +import { type ReactNode } from 'react'; + +export default function Layout({ children }: { children: ReactNode }) { + return ( +
+ +
{children}
+
+ ); +} diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx new file mode 100644 index 0000000..cb8cab1 --- /dev/null +++ b/app/dashboard/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
+
+

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

+
+
+ ); +} diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx new file mode 100644 index 0000000..a4d4fcc --- /dev/null +++ b/app/dashboard/puzzles/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
+
+

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

+
+
+ ); +} diff --git a/app/dashboard/ranking/page.tsx b/app/dashboard/ranking/page.tsx new file mode 100644 index 0000000..cb8cab1 --- /dev/null +++ b/app/dashboard/ranking/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
+
+

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

+
+
+ ); +} diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx new file mode 100644 index 0000000..cb8cab1 --- /dev/null +++ b/app/dashboard/settings/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
+
+

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

+
+
+ ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 206f740..80bf7f9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,13 @@ -import { cn } from '@/lib/utils'; import '@/styles/globals.css'; -import { ReactNode } from 'react'; + +import { cn } from '@/lib/utils'; +import { type ReactNode } from 'react'; export default function RootLayout({ children }: { children: ReactNode }) { return ( - + - +
{children}
diff --git a/app/page.tsx b/app/page.tsx index dd41376..35289f2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,11 +1,14 @@ +import AppLink from '@/ui/AppLink'; + export default function Home() { return (
-
-

- Amuse toi avec Next.js et{' '} +
+

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

+ Dashboard

); diff --git a/lib/nav-items.ts b/lib/nav-items.ts new file mode 100644 index 0000000..e997312 --- /dev/null +++ b/lib/nav-items.ts @@ -0,0 +1,44 @@ +/** + * Un élément de navigation. + * @typedef {Object} NavItem + * @property {string} name - Le nom de l'élément de navigation. + * @property {string} slug - Le slug de l'élément de navigation. + * @property {boolean} [disabled] - Si l'élément de navigation est désactivé. + */ +export type NavItem = { + name: string; + slug: string; + disabled?: boolean; +}; + +/** + * Les éléments de navigation. + * @type {NavItem[]} + */ +export const navItems: NavItem[] = [ + { + name: 'Dashboard', + slug: '', + disabled: false + }, + { + name: 'Classement', + slug: 'ranking', + disabled: false + }, + { + name: 'Puzzles', + slug: 'puzzles', + disabled: false + }, + { + name: 'Badges', + slug: 'badges', + disabled: false + }, + { + name: 'Paramètres', + slug: 'settings', + disabled: false + } +]; diff --git a/package.json b/package.json index 103a1a7..92a4680 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "eslint-plugin-prettier": "^4.2.1", "postcss": "^8.4.21", "prettier": "^2.8.3", + "prettier-plugin-tailwindcss": "^0.2.2", "tailwindcss": "^3.2.4", "typescript": "4.9.5" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d38b07c..d218d5c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,7 @@ specifiers: next: 13.1.6 postcss: ^8.4.21 prettier: ^2.8.3 + prettier-plugin-tailwindcss: ^0.2.2 react: 18.2.0 react-dom: 18.2.0 swr: ^2.0.3 @@ -49,6 +50,7 @@ devDependencies: eslint-plugin-prettier: 4.2.1_jqplj6qf3uqpxpu4gdyhwwasnq postcss: 8.4.21 prettier: 2.8.3 + prettier-plugin-tailwindcss: 0.2.2_prettier@2.8.3 tailwindcss: 3.2.4_postcss@8.4.21 typescript: 4.9.5 @@ -2174,6 +2176,58 @@ packages: fast-diff: 1.2.0 dev: true + /prettier-plugin-tailwindcss/0.2.2_prettier@2.8.3: + resolution: {integrity: sha512-5RjUbWRe305pUpc48MosoIp6uxZvZxrM6GyOgsbGLTce+ehePKNm7ziW2dLG2air9aXbGuXlHVSQQw4Lbosq3w==} + engines: {node: '>=12.17.0'} + peerDependencies: + '@prettier/plugin-php': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@shufo/prettier-plugin-blade': '*' + '@trivago/prettier-plugin-sort-imports': '*' + prettier: '>=2.2.0' + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + prettier-plugin-twig-melody: '*' + peerDependenciesMeta: + '@prettier/plugin-php': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@shufo/prettier-plugin-blade': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + prettier-plugin-twig-melody: + optional: true + dependencies: + prettier: 2.8.3 + dev: true + /prettier/2.8.3: resolution: {integrity: sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==} engines: {node: '>=10.13.0'} diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..586a240 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,8 @@ +module.exports = { + semi: true, + tabWidth: 2, + printWidth: 100, + singleQuote: true, + trailingComma: 'none', + plugins: [require('prettier-plugin-tailwindcss')] +}; diff --git a/tailwind.config.js b/tailwind.config.js index 4eb2228..6713391 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,7 +6,12 @@ module.exports = { hoverOnlyWhenSupported: true }, theme: { - extend: {} + extend: { + colors: { + 'light-dark': '#282828', + dark: '#202020' + } + } }, plugins: [require('@tailwindcss/forms')] }; diff --git a/ui/AppLink.tsx b/ui/AppLink.tsx new file mode 100644 index 0000000..6bcd38e --- /dev/null +++ b/ui/AppLink.tsx @@ -0,0 +1,15 @@ +'use client'; + +import Link from 'next/link'; +import { forwardRef } from 'react'; + +const AppLink = forwardRef[0]>((props, ref) => { + if (props.target === '_blank') { + return ; + } + return ; +}); + +AppLink.displayName = 'AppLink'; + +export default AppLink; diff --git a/ui/dashboard/Sidenav.tsx b/ui/dashboard/Sidenav.tsx new file mode 100644 index 0000000..4397349 --- /dev/null +++ b/ui/dashboard/Sidenav.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { NavItem, navItems } from '@/lib/nav-items'; +import { cn } from '@/lib/utils'; +import { useSelectedLayoutSegment } from 'next/navigation'; +import AppLink from '../AppLink'; + +export default function Sidenav() { + return ( +
+
+
+
+ +

Peer-at Code

+ +
+
+
+
+
    + {navItems.map((item) => ( +
  • + +
    • + ))} +
+
+ +
+
+ ); +} + +function NavItem({ item }: { item: NavItem }) { + const segment = useSelectedLayoutSegment(); + const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment); + return ( + + {item.name} + + ); +}