diff --git a/client/package.json b/client/package.json index 6841e30e..dbee44cd 100644 --- a/client/package.json +++ b/client/package.json @@ -58,6 +58,7 @@ "tailwindcss": "3.3.2", "tailwindcss-animate": "^1.0.6", "typescript": "5.1.3", + "vaul": "0.9.0", "zod": "^3.21.4" }, "devDependencies": { diff --git a/client/src/app/countries/[slug]/page.tsx b/client/src/app/countries/[slug]/page.tsx index ec9fc3ef..d01788e9 100644 --- a/client/src/app/countries/[slug]/page.tsx +++ b/client/src/app/countries/[slug]/page.tsx @@ -1,6 +1,7 @@ import { Metadata } from 'next'; import CountryDetailPanel from '@/containers/countries/detail/panel'; +import Panel from '@/containers/panel'; export const metadata: Metadata = { title: 'AFoCO | Country detail', @@ -8,5 +9,9 @@ export const metadata: Metadata = { }; export default function CountryPage() { - return ; + return ( + + + + ); } diff --git a/client/src/app/countries/page.tsx b/client/src/app/countries/page.tsx index b6fd9cba..6a5b3f7b 100644 --- a/client/src/app/countries/page.tsx +++ b/client/src/app/countries/page.tsx @@ -1,6 +1,7 @@ import { Metadata } from 'next'; import CountriesList from '@/containers/countries/list'; +import Panel from '@/containers/panel'; export const metadata: Metadata = { title: 'AFoCO | Countries', @@ -9,9 +10,11 @@ export const metadata: Metadata = { export default function Countries() { return ( -
-

Country Profile

- -
+ +
+

Countries

+ +
+ ); } diff --git a/client/src/app/datasets/page.tsx b/client/src/app/datasets/page.tsx index 4f3e26ec..28620d91 100644 --- a/client/src/app/datasets/page.tsx +++ b/client/src/app/datasets/page.tsx @@ -1,6 +1,7 @@ import { Metadata } from 'next'; import Datasets from '@/containers/datasets'; +import Panel from '@/containers/panel'; export const metadata: Metadata = { title: 'AFoCO | Datasets', @@ -8,5 +9,9 @@ export const metadata: Metadata = { }; export default function DatasetsPage() { - return ; + return ( + + + + ); } diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index ae0e1644..8b6a33d7 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -56,8 +56,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
- {children} + {children}
diff --git a/client/src/app/projects/[slug]/page.tsx b/client/src/app/projects/[slug]/page.tsx index 6d96ff28..32861c3e 100644 --- a/client/src/app/projects/[slug]/page.tsx +++ b/client/src/app/projects/[slug]/page.tsx @@ -5,8 +5,15 @@ export const metadata: Metadata = { description: '', }; +import Panel from '@/containers/panel'; import ProjectDetailPanel from '@/containers/projects/detail/panel'; export default function ProjectDetailPage() { - return ; + return ( + <> + + + + + ); } diff --git a/client/src/app/projects/page.tsx b/client/src/app/projects/page.tsx index 4ba7c2e3..03cd1828 100644 --- a/client/src/app/projects/page.tsx +++ b/client/src/app/projects/page.tsx @@ -5,13 +5,16 @@ export const metadata: Metadata = { description: '', }; +import Panel from '@/containers/panel'; import ProjectsList from '@/containers/projects/list'; export default function Projects() { return ( -
-

Projects

- -
+ +
+

Projects

+ +
+ ); } diff --git a/client/src/components/ui/drawer.tsx b/client/src/components/ui/drawer.tsx new file mode 100644 index 00000000..86112e1c --- /dev/null +++ b/client/src/components/ui/drawer.tsx @@ -0,0 +1,105 @@ +'use client'; + +import * as React from 'react'; + +import { Drawer as DrawerPrimitive } from 'vaul'; + +import { cn } from '@/lib/classnames'; + +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/client/src/containers/projects/detail/dashboard.tsx b/client/src/containers/projects/detail/dashboard.tsx index 3ea8f21a..64c13bf1 100644 --- a/client/src/containers/projects/detail/dashboard.tsx +++ b/client/src/containers/projects/detail/dashboard.tsx @@ -1,3 +1,4 @@ +'use client'; import { useState } from 'react'; import Image from 'next/image'; @@ -17,7 +18,7 @@ export default function ProjectDashboard() { const setDashboard = useSetAtom(dashboardAtom); return ( -
+

Overview

- - - + + - - */} + +
); }