From a3a95c8f4d1e56ab96ac02c415ab93637a034e99 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Sun, 25 Aug 2024 16:40:06 +0200
Subject: [PATCH] refactor: Move storage page header to own layout

---
 src/app/[locale]/(default)/storage/layout.tsx | 40 +++++++++++++++++++
 src/app/[locale]/(default)/storage/page.tsx   | 23 -----------
 2 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 src/app/[locale]/(default)/storage/layout.tsx

diff --git a/src/app/[locale]/(default)/storage/layout.tsx b/src/app/[locale]/(default)/storage/layout.tsx
new file mode 100644
index 0000000..c941e8f
--- /dev/null
+++ 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
index 868e0a9..e8a9c3d 100644
--- 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>