refactor: Move storage page header to own layout

hackerspace-ntnu · Aug 25, 2024 · a3a95c8 · a3a95c8
1 parent 9d14ab4
commit a3a95c8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 23 deletions.
diff --git a/src/app/[locale]/(default)/storage/layout.tsx b/src/app/[locale]/(default)/storage/layout.tsx
@@ -0,0 +1,40 @@
+import { useTranslations } from 'next-intl';
+
+import { Button } from '@/components/ui/Button';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/Tooltip';
+import { ShoppingCart } from 'lucide-react';
+
+export default function StorageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = useTranslations('storage');
+
+  return (
+    <>
+      <div className='relative'>
+        <h1 className='my-4 md:text-center'>{t('title')}</h1>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button className='absolute right-0 bottom-0 md:right-5'>
+                <ShoppingCart />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t('tooltips.viewShoppingCart')}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      {children}
+    </>
+  );
+}
diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
@@ -24,14 +24,6 @@ import {
   SelectValue,
 } from '@/components/ui/Select';
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/Tooltip';
-import { ShoppingCart } from 'lucide-react';
-
 export async function generateMetadata({
   params: { locale },
 }: {
@@ -92,21 +84,6 @@ export default function StoragePage({
 
   return (
     <>
-      <div className='relative'>
-        <h1 className='my-4 md:text-center'>{t('title')}</h1>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button className='absolute right-0 bottom-0 md:right-5'>
-                <ShoppingCart />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>{t('tooltips.viewShoppingCart')}</p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
       <div className='my-4 flex flex-col justify-center gap-2 lg:flex-row'>
         <SearchBar className='lg:max-w-2xl' />
         <Select>