diff --git a/package-lock.json b/package-lock.json index c49406d..4910a9b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 6144eb5..0999ef3 100644 --- a/package.json +++ b/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", diff --git a/src/app/[name]/page.tsx b/src/app/[name]/page.tsx index 53bf310..2296bfa 100644 --- a/src/app/[name]/page.tsx +++ b/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 = [ ] const shippings: Array = [ - { 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} /> +
+ + + دارای امتیاز پس از خرید + + +
+
+ + + دارای کد تخفیف + + +
-
-
+
+
diff --git a/src/components/bottomsheet/AnimatedBottomSheet.tsx b/src/components/bottomsheet/AnimatedBottomSheet.tsx index f814e0f..45fe1db 100644 --- a/src/components/bottomsheet/AnimatedBottomSheet.tsx +++ b/src/components/bottomsheet/AnimatedBottomSheet.tsx @@ -13,12 +13,9 @@ const AnimatedBottomSheet = (props: Props) => {
+ '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 backdrop-blur-2xl' + )}>
{props.title}
diff --git a/src/components/dropdown/MultiOption.tsx b/src/components/combobox/MultiOption.tsx similarity index 100% rename from src/components/dropdown/MultiOption.tsx rename to src/components/combobox/MultiOption.tsx diff --git a/src/components/icons/MedalStartIcon.tsx b/src/components/icons/MedalStartIcon.tsx new file mode 100644 index 0000000..9572c0f --- /dev/null +++ b/src/components/icons/MedalStartIcon.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +interface MedalStarIconProps extends React.SVGProps { + width?: number; + height?: number; + strokeColor?: string; +} + +const MedalStarIcon: React.FC = ({ + width = 7, + height = 7, + strokeColor = '#333333', + ...props +}) => ( + + + +); + +export default MedalStarIcon; diff --git a/src/components/listview/MenuItem.tsx b/src/components/listview/MenuItem.tsx index ce7b792..6e15db5 100644 --- a/src/components/listview/MenuItem.tsx +++ b/src/components/listview/MenuItem.tsx @@ -33,7 +33,7 @@ const MenuItem = ({ food }: MenuItemProps) => { />
-
{food.name}
+
{food.name}
{food.contains}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..a2df8dc --- /dev/null +++ b/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 & { + asChild?: boolean + }) { + const Comp = asChild ? Slot : "button" + + return ( + + ) +} + +export { Button, buttonVariants } diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx index 6a2b524..8174f5f 100644 --- a/src/components/ui/switch.tsx +++ b/src/components/ui/switch.tsx @@ -11,9 +11,10 @@ function Switch({ }: React.ComponentProps) { return (