From 5942aaadf01ad3087d8a0887bedf5eea446c619a Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Sun, 25 Aug 2024 14:44:58 +0200
Subject: [PATCH] refactor: Use Select instead of DropdownMenu on storage page

---
 messages/en.json                            |  4 +-
 messages/no.json                            |  4 +-
 src/app/[locale]/(default)/storage/page.tsx | 50 ++++++++++-----------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index c2983e6..188537d 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -56,9 +56,9 @@
       "quantityInfo": "{quantity} units available",
       "locationInfo": "Location: {location}"
     },
-    "dropdown": {
+    "select": {
       "filters": "Filters",
-      "buttonLabel": "Sort results",
+      "defaultPlaceholder": "Sort results",
       "popularity": "Popularity",
       "sortDescending": "Inventory (descending)",
       "sortAscending": "Inventory (ascending)",
diff --git a/messages/no.json b/messages/no.json
index 2ad06f4..881053c 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -56,9 +56,9 @@
       "quantityInfo": "{quantity} stk. på lager",
       "locationInfo": "Hylleplass: {location}"
     },
-    "dropdown": {
+    "select": {
       "filters": "Filtre",
-      "buttonLabel": "Sorter resultater",
+      "defaultPlaceholder": "Sorter resultater",
       "popularity": "Popularitet",
       "sortDescending": "Lagerbeholdning (synkende)",
       "sortAscending": "Lagerbeholdning (stigende)",
diff --git a/src/app/[locale]/(default)/storage/page.tsx b/src/app/[locale]/(default)/storage/page.tsx
index 38afab6..50ceed5 100644
--- a/src/app/[locale]/(default)/storage/page.tsx
+++ b/src/app/[locale]/(default)/storage/page.tsx
@@ -5,7 +5,6 @@ import Image from 'next/image';
 import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
 
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
-import { Button } from '@/components/ui/Button';
 import {
   Card,
   CardContent,
@@ -15,15 +14,14 @@ import {
   CardTitle,
 } from '@/components/ui/Card';
 import { Combobox } from '@/components/ui/Combobox';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/DropdownMenu';
 import { SearchBar } from '@/components/ui/SearchBar';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/Select';
 
 export async function generateMetadata({
   params: { locale },
@@ -77,34 +75,36 @@ export default function StoragePage({
   ];
 
   const filters = [
-    'dropdown.popularity',
-    'dropdown.sortDescending',
-    'dropdown.sortAscending',
-    'dropdown.name',
+    'select.popularity',
+    'select.sortDescending',
+    'select.sortAscending',
+    'select.name',
   ] as const;
 
   return (
     <>
       <h1>{t('title')}</h1>
-      <div className='my-4 flex justify-center gap-2'>
-        <SearchBar className='max-w-2xl' />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button>{t('dropdown.buttonLabel')}</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuLabel>{t('dropdown.filters')}</DropdownMenuLabel>
-            <DropdownMenuSeparator />
+      <div className='my-4 flex flex-col justify-center gap-2 lg:flex-row'>
+        <SearchBar className='lg:max-w-2xl' />
+        <Select>
+          <SelectTrigger className='w-full lg:w-[250px]'>
+            <SelectValue placeholder={t('select.defaultPlaceholder')} />
+          </SelectTrigger>
+          <SelectContent>
             {filters.map((filter) => (
-              <DropdownMenuItem key={filter}>{t(filter)}</DropdownMenuItem>
+              <SelectItem key={filter} value={filter}>
+                {t(filter)}
+              </SelectItem>
             ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+          </SelectContent>
+        </Select>
 
         <Combobox
           choices={categories}
           defaultDescription={t('combobox.defaultDescription')}
           defaultPlaceholder={t('combobox.defaultPlaceholder')}
+          buttonClassName='w-full lg:w-[250px]'
+          contentClassName='w-full lg:w-[200px]'
         />
       </div>
       <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>