diff --git a/src/app/[locale]/[name]/page.tsx b/src/app/[locale]/[name]/page.tsx index 5c4191c..283cb7b 100644 --- a/src/app/[locale]/[name]/page.tsx +++ b/src/app/[locale]/[name]/page.tsx @@ -21,6 +21,7 @@ import ComboBox, { DropdownOption } from "@/components/combobox/ComboBox"; import clsx from "clsx"; import CategorySmallItemRenderer from "@/components/listview/CategorySmallItemRenderer"; import { motion } from "framer-motion"; +import { useTranslation } from "react-i18next"; const categories = new Array(13).fill({ title: "خوراک", icon: "" }); @@ -126,31 +127,34 @@ const foods = [ ]; const sortings = [ - 'محبوب ترین', - 'بالاترین امتیاز', - 'جدید ترین', - 'ارزان ترین', - 'گران ترین', + "PopularityDescending", + "DateDescending", + "PriceAscending", + "RateDescending", + "PriceDescending" ] -const contents: Array = [ - { id: '0', title: 'گیاهی' }, - { id: '1', title: 'حیوانی' } -] - -const shippings: Array = [ - { id: '0', title: 'ارسال با پیک', label: '' }, -] - - const MenuIndex = () => { + const { t: tCommon } = useTranslation('common'); + const { t: tMenu } = useTranslation('menu', { + keyPrefix: "Menu" + }); + const contents: Array = [ + { id: '0', title: tMenu('MenuFilterDrawer.SelectContent.Options.Normal'), label: '' }, + { id: '1', title: tMenu('MenuFilterDrawer.SelectContent.Options.Vegan'), label: '' }, + ] + + const shippings: Array = [ + { id: '0', title: tMenu('MenuFilterDrawer.SelectDelivery.Options.Courier'), label: '' }, + ] + const [filterModal, setFilterModal] = useState(false); const [sortingModal, setSortingModal] = useState(false); const [, setSorting] = useQueryState('sortBy', { defaultValue: '0' }); const [search, setSearch] = useQueryState("q", { defaultValue: '' }); const [selectedCategory, setSelectedCategory] = useQueryState('category', { defaultValue: '0' }); - const [selectedContentId, setSelectedContentId] = useQueryState('contentType', { defaultValue: '0' }); - const [selectedShippingId, setSelectedShippingId] = useQueryState('shippingType', { defaultValue: '0' }); + const [selectedIngredients, setSelectedIngredients] = useQueryState('ingredients', { defaultValue: '0' }); + const [selectedDeliveryId, setSelectedDeliveryId] = useQueryState('delivery', { defaultValue: '0' }); const smallCategoriesRef: React.RefObject = useRef(null); const wrapperRef: React.RefObject = useRef(null); const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false); @@ -199,12 +203,12 @@ const MenuIndex = () => { setSorting(() => String(index)); } - const changeSelectedContent = (e: React.MouseEvent, index: number) => { - setSelectedContentId(() => contents[index]?.id || contents[0].id); + const changeSelectedIngredients = (e: React.MouseEvent, index: number) => { + setSelectedIngredients(() => contents[index]?.id || contents[0].id); } - const changeSelectedShipping = (e: React.MouseEvent, index: number) => { - setSelectedShippingId(() => contents[index]?.id || contents[0].id); + const changeSelectedDelivery = (e: React.MouseEvent, index: number) => { + setSelectedDeliveryId(() => contents[index]?.id || contents[0].id); } const filteredReceiptItems = useMemo(() => { @@ -220,7 +224,7 @@ const MenuIndex = () => { return (
- + {categories.map((item, index) => ( {
+
- +
- +
{sortings.map((v, i) => { return (
changeSorting(i)} className="text-sm2 font-medium cursor-pointer"> - {v} + {tMenu('MenuSortingDrawer.Options.' + v)}
{i < sortings.length - 1 &&
}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 29bbe70..9adc1d5 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -11,7 +11,7 @@ export const metadata: Metadata = { description: 'Webapp dashboard' } -const i18nNamespaces = ['auth', 'common']; +const i18nNamespaces = ['common', 'menu', 'auth']; export default async function RootLayout({ children, diff --git a/src/components/input/SearchBox.tsx b/src/components/input/SearchBox.tsx index 7d51ada..26e3211 100644 --- a/src/components/input/SearchBox.tsx +++ b/src/components/input/SearchBox.tsx @@ -3,17 +3,18 @@ import SearchIcon from '../icons/SearchIcon'; type Props = { value: string; + placeholder?: string; onChange: (e: React.ChangeEvent) => void; }; -export default function SearchBox({ value, onChange }: Props) { +export default function SearchBox({ value, placeholder = '', onChange }: Props) { return (
diff --git a/src/locales/fa/common.json b/src/locales/fa/common.json index 2983799..54e01e9 100644 --- a/src/locales/fa/common.json +++ b/src/locales/fa/common.json @@ -28,5 +28,6 @@ "Description": "آیا میخواهید از سیستم خارج شوید؟", "ButtonOk": "بله خارج می‌شوم", "ButtonCancel": "منصرف شدم" - } + }, + "SearchPlaceholder": "جستجو" } \ No newline at end of file diff --git a/src/locales/fa/menu.json b/src/locales/fa/menu.json new file mode 100644 index 0000000..aca040a --- /dev/null +++ b/src/locales/fa/menu.json @@ -0,0 +1,38 @@ +{ + "Menu": { + "MenuFilterDrawer": { + "Label": "فیلتر بر اساس", + "Heading": "فیلتر ها", + "SelectContent": { + "Label": "محتویات", + "SearchLabel": "جستجو ...", + "Options": { + "Normal": "معمولی", + "Vegan": "گیاهی" + } + }, + "SelectDelivery": { + "Label": "روش ارسال", + "SearchLabel": "جستجو ...", + "Options": { + "Courier": "ارسال با پیک" + } + }, + "PlusPoint": "دارای امتیاز پس از خرید", + "DiscountState": "دارای کد تخفیف", + "ButtonOk": "اعمال فیلتر", + "ButtonCancel": "حذف فیلتر" + }, + "MenuSortingDrawer": { + "Label": "", + "Heading": "مرتب کردن بر اساس", + "Options": { + "PopularityDescending": "محبوب ترین", + "RateDescending": "بالاترین امتیاز", + "DateDescending": "جدیدترین", + "PriceAscending": "ارزان ترین", + "PriceDescending": "گران ترین" + } + } + } +} \ No newline at end of file