danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

add: filter switch controls

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-11 22:11:41 +03:30
parent f6483706c0
commit 09bfd832d4
9 changed files with 128 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1
View File
@@ -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
+1
View File
@@ -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
+27 -6
View File
@@ -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="px-9 pt-13 flex justify-between gap-[22px]">
<hr className="text-white/40 mb-7 mt-12" />
<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>
<hr className="text-white/40 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
+3 -6
View File
@@ -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',
'data-[visible=true]:bottom-0 transition-all duration-150'
)}
style={{
backdropFilter: 'blur(44px)'
}}>
'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'
)}>
<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/dropdown/MultiOption.tsx → src/components/combobox/MultiOption.tsx
View File
src/components/icons/MedalStartIcon.tsx
+33
View File
@@ -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
+1 -1
View File
@@ -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
+59
View File
@@ -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
+3 -2
View File
@@ -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>