Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #2 from Peer-at-Code/core/sidenav

Browse source 
Ajout des routes dashboard/ & SideNav
This commit is contained in:
Théo 2023-02-04 20:35:50 +01:00 • committed by GitHub
commit d4de2bebfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 263 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.prettierrc
View file

@ -1,7 +0,0 @@
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none"
}

12
app/dashboard/badges/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

11
app/dashboard/layout.tsx Normal file
View file

@ -0,0 +1,11 @@
import Sidenav from '@/ui/dashboard/Sidenav';
import { type ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<div className="pl-60">
<Sidenav />
<div className="mx-auto max-w-5xl">{children}</div>
</div>
);
}

12
app/dashboard/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

12
app/dashboard/puzzles/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-4xl font-bold text-center">
Amuse toi avec <span className="rounded-md bg-white text-black p-1 ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

12
app/dashboard/ranking/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

12
app/dashboard/settings/page.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Page() {
return (
<div className="flex h-screen w-full">
<div className="m-auto">
<h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> !
</h1>
</div>
</div>
);
}

9
app/layout.tsx
View file

@ -1,12 +1,13 @@
import { cn } from '@/lib/utils';
import '@/styles/globals.css'; 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 }) { export default function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="fr" dir="ltr" className={cn('[color-scheme:dark] scroll-smooth')}> <html lang="fr" dir="ltr" className={cn('[color-scheme:dark] scroll-smooth bg-light-dark')}>
<head /> <head />
<body className="min-h-screen"> <body className="relative min-h-screen">
<main>{children}</main> <main>{children}</main>
</body> </body>
</html> </html>

9
app/page.tsx
View file

@ -1,11 +1,14 @@
import AppLink from '@/ui/AppLink';
export default function Home() { export default function Home() {
return ( return (
<div className="flex h-screen w-full"> <div className="flex h-screen w-full">
<div className="m-auto"> <div className="m-auto flex flex-col">
<h1 className="text-4xl font-bold text-center"> <h1 className="text-center text-4xl font-bold">
Amuse toi avec <span className="rounded-md bg-white text-black p-1 ">Next.js</span> et{' '} Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
<span className="text-blue-500">Tailwindcss</span> ! <span className="text-blue-500">Tailwindcss</span> !
</h1> </h1>
<AppLink href="/dashboard">Dashboard</AppLink>
</div> </div>
</div> </div>
); );

44
lib/nav-items.ts Normal file
View file

@ -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
}
];

1
package.json
View file

@ -44,6 +44,7 @@
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"postcss": "^8.4.21", "postcss": "^8.4.21",
"prettier": "^2.8.3", "prettier": "^2.8.3",
"prettier-plugin-tailwindcss": "^0.2.2",
"tailwindcss": "^3.2.4", "tailwindcss": "^3.2.4",
"typescript": "4.9.5" "typescript": "4.9.5"
} }

54
pnpm-lock.yaml generated
View file

@ -17,6 +17,7 @@ specifiers:
next: 13.1.6 next: 13.1.6
postcss: ^8.4.21 postcss: ^8.4.21
prettier: ^2.8.3 prettier: ^2.8.3
prettier-plugin-tailwindcss: ^0.2.2
react: 18.2.0 react: 18.2.0
react-dom: 18.2.0 react-dom: 18.2.0
swr: ^2.0.3 swr: ^2.0.3
@ -49,6 +50,7 @@ devDependencies:
eslint-plugin-prettier: 4.2.1_jqplj6qf3uqpxpu4gdyhwwasnq eslint-plugin-prettier: 4.2.1_jqplj6qf3uqpxpu4gdyhwwasnq
postcss: 8.4.21 postcss: 8.4.21
prettier: 2.8.3 prettier: 2.8.3
prettier-plugin-tailwindcss: 0.2.2_prettier@2.8.3
tailwindcss: 3.2.4_postcss@8.4.21 tailwindcss: 3.2.4_postcss@8.4.21
typescript: 4.9.5 typescript: 4.9.5
@ -2174,6 +2176,58 @@ packages:
fast-diff: 1.2.0 fast-diff: 1.2.0
dev: true 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: /prettier/2.8.3:
resolution: {integrity: sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==} resolution: {integrity: sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}

8
prettier.config.js Normal file
View file

@ -0,0 +1,8 @@
module.exports = {
semi: true,
tabWidth: 2,
printWidth: 100,
singleQuote: true,
trailingComma: 'none',
plugins: [require('prettier-plugin-tailwindcss')]
};

7
tailwind.config.js
View file

@ -6,7 +6,12 @@ module.exports = {
hoverOnlyWhenSupported: true hoverOnlyWhenSupported: true
}, },
theme: { theme: {
extend: {} extend: {
colors: {
'light-dark': '#282828',
dark: '#202020'
}
}
}, },
plugins: [require('@tailwindcss/forms')] plugins: [require('@tailwindcss/forms')]
}; };

15
ui/AppLink.tsx Normal file
View file

@ -0,0 +1,15 @@
'use client';
import Link from 'next/link';
import { forwardRef } from 'react';
const AppLink = forwardRef<HTMLAnchorElement, Parameters<typeof Link>[0]>((props, ref) => {
if (props.target === '_blank') {
return <a ref={ref} {...props} href={props.href.toString()} />;
}
return <Link ref={ref} {...props} href={props.href} />;
});
AppLink.displayName = 'AppLink';
export default AppLink;

53
ui/dashboard/Sidenav.tsx Normal file
View file

@ -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 (
<div className="fixed top-0 left-0 h-full w-60 space-y-4 bg-dark shadow-md">
<div className="px-6 pt-4">
<div className="flex items-center">
<div className="mx-auto">
<AppLink href="/">
<h1 className="text-2xl font-bold">Peer-at Code</h1>
</AppLink>
</div>
</div>
</div>
<hr className="mx-auto w-1/2 pb-4" />
<ul className="relative flex flex-col space-y-4 px-8">
{navItems.map((item) => (
<li className="relative" key={item.slug}>
<NavItem item={item} />
</li>
))}
</ul>
<div className="absolute bottom-5 flex w-full items-center text-center">
<button className="mx-auto rounded-md bg-light-dark py-3 px-8 hover:bg-light-dark/60">
<span className="text-sm font-semibold">Session ici plus tard</span>
</button>
</div>
</div>
);
}
function NavItem({ item }: { item: NavItem }) {
const segment = useSelectedLayoutSegment();
const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment);
return (
<AppLink
href={item.disabled ? '/dashboard' : `/dashboard/${item.slug}`}
className={cn('block rounded-md px-3 py-3 text-sm font-medium', {
'bg-light-dark text-gray-400 hover:bg-light-dark/60': !isActive,
'bg-blue-500 text-white': isActive,
'text-gray-600 hover:text-gray-600': item.disabled
})}
passHref
>
{item.name}
</AppLink>
);
}