sort foods

src/app/[name]/(Main)/components/MenuSortingDrawer.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
+import clsx from "clsx";
 import React from "react";
 
 type MenuSortingDrawerProps = {
   visible: boolean;
   onClose: () => void;
-  sortings: string[];
+  sortings: ReadonlyArray<string>;
+  activeIndex: number;
   onSelect: (index: number) => void;
   tMenu: (key: string) => string;
 };
@@ -15,6 +17,7 @@ const MenuSortingDrawer = ({
   visible,
   onClose,
   sortings,
+  activeIndex,
   onSelect,
   tMenu,
 }: MenuSortingDrawerProps) => {
@@ -25,20 +28,23 @@ const MenuSortingDrawer = ({
       inDelay={150}
       onClick={onClose}
     >
-      <div className="px-8.5 py-10 justify-between">
-        {sortings.map((value, index) => (
-          <div key={value}>
-            <div
+      <div className="px-8.5 py-10 flex flex-col gap-2">
+        {sortings.map((value, index) => {
+          const isActive = index === activeIndex;
+          return (
+            <button
+              key={value}
+              type="button"
               onClick={() => onSelect(index)}
-              className="text-sm2 font-normal cursor-pointer"
+              className={clsx(
+                "flex items-center justify-between py-3 text-sm2 transition-colors",
+                isActive ? "text-primary font-semibold" : "text-foreground"
+              )}
             >
-              {tMenu(`MenuSortingDrawer.Options.${value}`)}
-            </div>
-            {index < sortings.length - 1 && (
-              <hr className="border-white/40 dark:border-border mb-4 mt-4" />
-            )}
-          </div>
-        ))}
+              <span>{tMenu(`MenuSortingDrawer.Options.${value}`)}</span>
+            </button>
+          );
+        })}
       </div>
     </AnimatedBottomSheet>
   );