diff --git a/.prettierignore b/.prettierignore
index 653334d8..107b60d9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,5 @@
.github/
*.config.js
.prettierrc.js
-*.md
\ No newline at end of file
+*.md
+settings.json
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index e8c67526..1f0a3bfb 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,28 +1,30 @@
-import { GeistSans } from 'geist/font/sans'
-import './globals.css'
+import { GeistSans } from 'geist/font/sans';
+import './globals.css';
+import Nav from '@/components/Nav/Nav';
const defaultUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
- : 'http://localhost:3000'
+ : 'http://localhost:3000';
export const metadata = {
metadataBase: new URL(defaultUrl),
title: 'Next.js and Appwrite',
- description: 'The fastest way to build apps with Next.js and Appwrite'
-}
+ description: 'The fastest way to build apps with Next.js and Appwrite',
+};
export default function RootLayout({
children,
}: {
- children: React.ReactNode
+ children: React.ReactNode;
}) {
return (
-
+
+
{children}
- )
+ );
}
diff --git a/app/page.tsx b/app/page.tsx
index 472a6c60..02ed89fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,8 @@
-import AuthButton from '../components/AuthButton';
-
export default function Index() {
return (
);
diff --git a/components/AuthButton.tsx b/components/AuthButton.tsx
index d82a86d5..7ac95a0f 100644
--- a/components/AuthButton.tsx
+++ b/components/AuthButton.tsx
@@ -16,14 +16,18 @@ export default async function AuthButton() {
return user ? (
Hey, {user.email}!
-
+
) : (
-
+
Login
);
diff --git a/components/button/Button.stories.ts b/components/Button/Button.stories.ts
similarity index 66%
rename from components/button/Button.stories.ts
rename to components/Button/Button.stories.ts
index 3c1cb32d..4c5ab520 100644
--- a/components/button/Button.stories.ts
+++ b/components/Button/Button.stories.ts
@@ -1,12 +1,12 @@
import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from "@storybook/test";
+import { fn } from '@storybook/test';
import { Button } from './Button';
//👇 This default export determines where your story goes in the story list
const meta: Meta = {
- title: "Components/Button",
+ title: 'Components/Button',
component: Button,
- tags: ["autodocs"],
+ tags: ['autodocs'],
parameters: {
docs: {
description: {
@@ -17,14 +17,14 @@ const meta: Meta = {
argTypes: {
size: {
options: ['default', 'sm', 'lg', 'icon'],
- control: {type: 'radio'},
- description: "How large should the button be?",
+ control: { type: 'radio' },
+ description: 'How large should the button be?',
},
variant: {
- description: 'Which type of button?'
+ description: 'Which type of button?',
},
- label: { description: "Button text content" },
- onClick: { description: "Click handler" },
+ label: { description: 'Button text content' },
+ onClick: { description: 'Click handler' },
},
args: { onClick: fn() },
} satisfies Meta;
@@ -36,7 +36,6 @@ export const Default: Story = {
args: {
variant: 'default',
size: 'default',
- label: "Click Me",
+ label: 'Click Me',
},
-
-};
\ No newline at end of file
+};
diff --git a/components/Button/Button.test.tsx b/components/Button/Button.test.tsx
new file mode 100644
index 00000000..d93e89be
--- /dev/null
+++ b/components/Button/Button.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Button } from './Button';
+
+test('should render a button with no variant defined', () => {
+ render();
+ const defaultButton = screen.getByRole('button');
+ expect(defaultButton).toHaveClass('bg-orange-600');
+});
+
+test('should render a button with the link variant defined. It should have no background or border, only an underline on hover', () => {
+ render();
+ const defaultButton = screen.getByRole('button');
+ expect(defaultButton).toHaveClass('underline-offset-4');
+});
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
new file mode 100644
index 00000000..7b1a8c37
--- /dev/null
+++ b/components/Button/Button.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { LucideProps } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-orange-600 text-white hover:bg-orange-600/90',
+ outline:
+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+ destructive:
+ 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+ secondary:
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'h-10 w-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+ label?: string;
+ icon?: React.ComponentType;
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild, label, icon, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/components/LogoNav/LogoNav.tsx b/components/LogoNav/LogoNav.tsx
new file mode 100644
index 00000000..8d634115
--- /dev/null
+++ b/components/LogoNav/LogoNav.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image'
+import logo from '/public/assets/logo-colored-nav.svg'
+
+export const LogoNav = () => {
+ return (
+
+ )
+}
+
+export default LogoNav
\ No newline at end of file
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
new file mode 100644
index 00000000..96d51200
--- /dev/null
+++ b/components/Nav/Nav.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import LogoNav from '../LogoNav/LogoNav';
+import { Menu } from 'lucide-react';
+import { Button } from '../Button/Button';
+import {
+ Drawer,
+ DrawerContent,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from '../NavDrawer/NavDrawer';
+
+export const Nav = () => {
+ return (
+
+ );
+};
+
+export default Nav;
diff --git a/components/NavDrawer/NavDrawer.tsx b/components/NavDrawer/NavDrawer.tsx
new file mode 100644
index 00000000..fc7a0d8d
--- /dev/null
+++ b/components/NavDrawer/NavDrawer.tsx
@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Drawer = ({
+ shouldScaleBackground = true,
+ ...props
+}: React.ComponentProps) => (
+
+);
+Drawer.displayName = 'Drawer';
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+));
+DrawerContent.displayName = 'DrawerContent';
+
+const DrawerHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+const DrawerFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DrawerFooter.displayName = 'DrawerFooter';
+
+const DrawerTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+
+
+
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+ Drawer,
+ DrawerPortal,
+ DrawerOverlay,
+ DrawerTrigger,
+ DrawerClose,
+ DrawerContent,
+ DrawerHeader,
+ DrawerFooter,
+ DrawerTitle,
+ DrawerDescription,
+};
diff --git a/components/button/Button.test.tsx b/components/button/Button.test.tsx
deleted file mode 100644
index 494ba2c8..00000000
--- a/components/button/Button.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { Button } from "./Button";
-
-it('should render a button with no variant defined', () => {
- render()
- const defaultButton = screen.getByRole('button')
- expect(defaultButton).toHaveClass('bg-orange-600')
-})
\ No newline at end of file
diff --git a/components/button/Button.tsx b/components/button/Button.tsx
deleted file mode 100644
index f0c5827e..00000000
--- a/components/button/Button.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { LucideProps } from "lucide-react";
-
-import { cn } from '../../lib/utils';
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
- {
- variants: {
- variant: {
- default: "bg-orange-600 text-white hover:bg-orange-600/90",
- outline:
- "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
- label?: string;
- icon?: React.ComponentType;
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild, label, icon, ...props }, ref) => {
- return (
-
- );
- }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };
\ No newline at end of file
diff --git a/package.json b/package.json
index 66a44ab3..60a8e16c 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"lint": "next lint --quiet"
},
"dependencies": {
+ "@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-slot": "^1.0.2",
"appwrite": "^14.0.0",
"autoprefixer": "10.4.15",
@@ -27,7 +28,8 @@
"tailwind-merge": "^2.2.2",
"tailwindcss": "3.3.3",
"tailwindcss-animate": "^1.0.7",
- "typescript": "5.1.3"
+ "typescript": "5.1.3",
+ "vaul": "^0.9.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.2.25",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5ee73bc7..53c65126 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
+ '@radix-ui/react-dialog':
+ specifier: ^1.0.5
+ version: 1.0.5(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot':
specifier: ^1.0.2
version: 1.0.2(@types/react@18.2.8)(react@18.2.0)
@@ -50,6 +53,9 @@ dependencies:
typescript:
specifier: 5.1.3
version: 5.1.3
+ vaul:
+ specifier: ^0.9.0
+ version: 0.9.0(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
devDependencies:
'@chromatic-com/storybook':
@@ -2292,6 +2298,12 @@ packages:
webpack: 5.90.3(esbuild@0.20.1)
dev: true
+ /@radix-ui/primitive@1.0.1:
+ resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+ dependencies:
+ '@babel/runtime': 7.24.0
+ dev: false
+
/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.8)(react@18.2.0):
resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
peerDependencies:
@@ -2305,6 +2317,195 @@ packages:
'@types/react': 18.2.8
react: 18.2.0
+ /@radix-ui/react-context@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-id': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ aria-hidden: 1.2.4
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ react-remove-scroll: 2.5.5(@types/react@18.2.8)(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-id@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ '@types/react-dom': 18.2.5
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@radix-ui/react-slot@1.0.2(@types/react@18.2.8)(react@18.2.0):
resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
peerDependencies:
@@ -2319,6 +2520,64 @@ packages:
'@types/react': 18.2.8
react: 18.2.0
+ /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.0
+ '@types/react': 18.2.8
+ react: 18.2.0
+ dev: false
+
/@rushstack/eslint-patch@1.10.2:
resolution: {integrity: sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==}
dev: true
@@ -3544,7 +3803,6 @@ packages:
resolution: {integrity: sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==}
dependencies:
'@types/react': 18.2.8
- dev: true
/@types/react@18.2.8:
resolution: {integrity: sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==}
@@ -4220,6 +4478,13 @@ packages:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
dev: true
+ /aria-hidden@1.2.4:
+ resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+ engines: {node: '>=10'}
+ dependencies:
+ tslib: 2.6.2
+ dev: false
+
/aria-query@5.1.3:
resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
dependencies:
@@ -5613,6 +5878,10 @@ packages:
engines: {node: '>=8'}
dev: true
+ /detect-node-es@1.1.0:
+ resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+ dev: false
+
/detect-package-manager@2.0.1:
resolution: {integrity: sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==}
engines: {node: '>=12'}
@@ -6884,6 +7153,11 @@ packages:
hasown: 2.0.2
dev: true
+ /get-nonce@1.0.1:
+ resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+ engines: {node: '>=6'}
+ dev: false
+
/get-npm-tarball-url@2.1.0:
resolution: {integrity: sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==}
engines: {node: '>=12.17'}
@@ -7345,6 +7619,12 @@ packages:
side-channel: 1.0.6
dev: true
+ /invariant@2.2.4:
+ resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+ dependencies:
+ loose-envify: 1.4.0
+ dev: false
+
/ip@2.0.1:
resolution: {integrity: sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==}
dev: true
@@ -9927,6 +10207,58 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /react-remove-scroll-bar@2.3.6(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@types/react': 18.2.8
+ react: 18.2.0
+ react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
+ tslib: 2.6.2
+ dev: false
+
+ /react-remove-scroll@2.5.5(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@types/react': 18.2.8
+ react: 18.2.0
+ react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
+ react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
+ tslib: 2.6.2
+ use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
+ use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
+ dev: false
+
+ /react-style-singleton@2.2.1(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@types/react': 18.2.8
+ get-nonce: 1.0.1
+ invariant: 2.2.4
+ react: 18.2.0
+ tslib: 2.6.2
+ dev: false
+
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
@@ -11447,6 +11779,37 @@ packages:
qs: 6.12.0
dev: true
+ /use-callback-ref@1.3.2(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@types/react': 18.2.8
+ react: 18.2.0
+ tslib: 2.6.2
+ dev: false
+
+ /use-sidecar@1.1.2(@types/react@18.2.8)(react@18.2.0):
+ resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@types/react': 18.2.8
+ detect-node-es: 1.1.0
+ react: 18.2.0
+ tslib: 2.6.2
+ dev: false
+
/util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -11498,6 +11861,20 @@ packages:
engines: {node: '>= 0.8'}
dev: true
+ /vaul@0.9.0(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+ peerDependencies:
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ dependencies:
+ '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.2.5)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ transitivePeerDependencies:
+ - '@types/react'
+ - '@types/react-dom'
+ dev: false
+
/vm-browserify@1.1.2:
resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
dev: true
diff --git a/public/assets/logo-colored-nav.svg b/public/assets/logo-colored-nav.svg
new file mode 100644
index 00000000..12a3516c
--- /dev/null
+++ b/public/assets/logo-colored-nav.svg
@@ -0,0 +1,12 @@
+
diff --git a/stories/Components/Header.tsx b/stories/Components/Header.tsx
index c9c5a7e8..d4741600 100644
--- a/stories/Components/Header.tsx
+++ b/stories/Components/Header.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button } from '../../components/button/Button';
+import { Button } from '../../components/Button/Button';
import './header.css';
type User = {
@@ -13,11 +13,21 @@ interface HeaderProps {
onCreateAccount?: () => void;
}
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = ({
+ user,
+ onLogin,
+ onLogout,
+ onCreateAccount,
+}: HeaderProps) => (