add: filter switch controls

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-popover": "^1.1.14",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-switch": "^1.2.5",
         "@tanstack/react-query": "^5.81.5",
         "@tanstack/react-query-devtools": "^5.81.5",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-query-devtools": "^5.81.5",

src/app/[name]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { MouseEventHandler, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import SearchBox from "@/components/input/SearchBox";
 import CategoryItemRenderer from "@/components/listview/CategoryItemRenderer";
 import HorizontalScrollView from "@/components/listview/HorizontalScrollView";
@@ -13,7 +13,10 @@ import React from "react";
 import MenuItem from "@/components/listview/MenuItem";
 import Button from "@/components/button/PrimaryButton";
 import AnimatedBottomSheet from "@/components/bottomsheet/AnimatedBottomSheet";
-import MultiOption, { DropdownOption } from "@/components/dropdown/MultiOption";
+import MultiOption from "@/components/combobox/MultiOption";
+import { DropdownOption } from "@/components/combobox/Combobox";
+import { Switch } from "@/components/ui/switch";
+import MedalStarIcon from "@/components/icons/MedalStartIcon";
 
 const categories = new Array(13).fill({ title: "خوراک", icon: "" });
 
@@ -132,7 +135,7 @@ const contents: Array<DropdownOption> = [
 ]
 
 const shippings: Array<DropdownOption> = [
-  { id: '0', title: 'ارسال با پیک' },
+  { id: '0', title: 'ارسال با پیک', label: '' },
 ]
 
 
@@ -141,7 +144,7 @@ const MenuIndex = () => {
   const [selectedCategory, setSelectedCategory] = useState(0);
   const [filterModal, setFilterModal] = useState(false);
   const [sortingModal, setSortingModal] = useState(false);
-  const [sorting, setSorting] = useState(0);
+  const [, setSorting] = useState(0);
   const [selectedContentId, setSelectedContentId] = useState('0');
   const [selectedShippingId, setSelectedShippingId] = useState('0');
 
@@ -243,9 +246,27 @@ const MenuIndex = () => {
             options={shippings}
             selectedId={selectedShippingId}
             onSelectionChange={changeSelectedShipping} />
+          <div
+            className="flex w-full mt-9.5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
+          >
+            <span>
+              <MedalStarIcon />
+              دارای امتیاز پس از خرید
+            </span>
+            <Switch className="w-12 h-6" />
+          </div>
+          <div
+            className="flex w-full mt-9.5 h-11 items-center justify-between gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-black"
+          >
+            <span>
+              <MedalStarIcon />
+              دارای کد تخفیف
+            </span>
+            <Switch />
+          </div>
         </div>
-        <div className="px-9 pt-13 flex justify-between gap-[22px]">
+          <hr className="text-white/40  mt-12" />
-          <hr className="text-white/40 mb-7 mt-12" />
+        <div className="px-9 pt-6 flex justify-between gap-[22px]">
           <div className="w-full">
             <Button>اعمال فیلتر</Button>
           </div>

src/components/bottomsheet/AnimatedBottomSheet.tsx

@@ -13,12 +13,9 @@ const AnimatedBottomSheet = (props: Props) => {
             <div
                 data-visible={props.visible}
                 className={clsx(
-                    'absolute -bottom-full left-0 w-full bg-white/64 rounded-t-4xl pt-[39px] pb-6',
+                    'border border-solid border-white absolute -bottom-full left-0 w-full bg-white/64 rounded-t-4xl pt-[39px] pb-6',
-                    'data-[visible=true]:bottom-0 transition-all duration-150'
+                    'data-[visible=true]:bottom-0 transition-all duration-150 backdrop-blur-2xl'
-                )}
+                )}>
-                style={{
-                    backdropFilter: 'blur(44px)'
-                }}>
                 <div className="ps-[31px] pe-[33px] flex justify-between">
                     <div className='text-lg font-medium text-black leading-8 mt-2.5'>{props.title}</div>
                     <div onClick={props.onClick} className="bg-white/38 w-8 h-8 rounded-full p-1.5">

src/components/icons/MedalStartIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+interface MedalStarIconProps extends React.SVGProps<SVGSVGElement> {
+  width?: number;
+  height?: number;
+  strokeColor?: string;
+}
+
+const MedalStarIcon: React.FC<MedalStarIconProps> = ({
+  width = 7,
+  height = 7,
+  strokeColor = '#333333',
+  ...props
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 7 7"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M3.78085 1.81634L4.17419 2.603C4.22752 2.70967 4.36752 2.81634 4.49419 2.83634L5.20752 2.95633C5.66085 3.02967 5.76752 3.363 5.44085 3.68967L4.88752 4.24299C4.79419 4.33633 4.74085 4.51634 4.77419 4.64967L4.93419 5.33634C5.06085 5.87634 4.77419 6.08966 4.29419 5.80299L3.62752 5.40966C3.50752 5.33633 3.30752 5.33633 3.18752 5.40966L2.52085 5.80299C2.04085 6.08299 1.75419 5.87634 1.88085 5.33634L2.04085 4.64967C2.06752 4.523 2.02085 4.33633 1.92752 4.24299L1.37419 3.68967C1.04752 3.363 1.15419 3.03633 1.60752 2.95633L2.32085 2.83634C2.44085 2.81634 2.58085 2.70967 2.63419 2.603L3.02752 1.81634C3.22085 1.38967 3.56752 1.38967 3.78085 1.81634Z"
+      stroke={strokeColor}
+      strokeWidth="1.1"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default MedalStarIcon;

src/components/listview/MenuItem.tsx

@@ -33,7 +33,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
       />
       <div className="w-full h-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-semibold">{food.name}</div>
+          <div className="text-sm2 font-medium">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
             {food.contains}
           </div>

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/switch.tsx

@@ -11,9 +11,10 @@ function Switch({
 }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
+      dir="ltr"
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-6 w-12 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -21,7 +22,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(140%-3px)] data-[state=unchecked]:translate-x-[1px]"
         )}
       />
     </SwitchPrimitive.Root>