{title}
- {displayPrice && {displayPrice}} -{description}
} - {subtitle &&{subtitle}
} +{title}
+ {displayPrice && ( ++ {dictionary && lang === 'ar' ? 'أحذية رياضية عالية الجودة' : description} +
+ )} + {subtitle && !description && ( ++ {dictionary && lang === 'ar' ? 'تصميم عصري ومريح' : subtitle} +
+ )} {meta && (
{Array.isArray(meta) ? meta.join(" • ") : meta}
diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
index 107d302..da769da 100644
--- a/src/components/Filters.tsx
+++ b/src/components/Filters.tsx
@@ -3,25 +3,44 @@
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { getArrayParam, removeParams, toggleArrayParam } from "@/lib/utils/query";
+import { type Dictionary } from "@/components/internationalization/dictionaries";
-const GENDERS = ["men", "women", "unisex"] as const;
-const SIZES = ["XS", "S", "M", "L", "XL"] as const;
-const COLORS = ["black", "white", "red", "green", "blue", "grey"] as const;
-const PRICES = [
- { id: "0-50", label: "$0 - $50" },
- { id: "50-100", label: "$50 - $100" },
- { id: "100-150", label: "$100 - $150" },
- { id: "150-", label: "Over $150" },
-] as const;
+interface FiltersProps {
+ dictionary: Dictionary;
+}
type GroupKey = "gender" | "size" | "color" | "price";
-export default function Filters() {
+export default function Filters({ dictionary }: FiltersProps) {
const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const search = useMemo(() => `?${searchParams.toString()}`, [searchParams]);
+ const GENDERS = [
+ { id: "men", label: dictionary.filters.men },
+ { id: "women", label: dictionary.filters.women },
+ { id: "unisex", label: dictionary.filters.unisex },
+ ] as const;
+
+ const SIZES = ["XS", "S", "M", "L", "XL"] as const;
+
+ const COLORS = [
+ { id: "black", label: dictionary.filters.black },
+ { id: "white", label: dictionary.filters.white },
+ { id: "red", label: dictionary.filters.red },
+ { id: "green", label: dictionary.filters.green },
+ { id: "blue", label: dictionary.filters.blue },
+ { id: "grey", label: dictionary.filters.grey },
+ ] as const;
+
+ const PRICES = [
+ { id: "0-50", label: `0 - 50 ${dictionary.product.currency}` },
+ { id: "50-100", label: `50 - 100 ${dictionary.product.currency}` },
+ { id: "100-150", label: `100 - 150 ${dictionary.product.currency}` },
+ { id: "150-", label: `${dictionary.filters.over} 150 ${dictionary.product.currency}` },
+ ] as const;
+
const [open, setOpen] = useState(false);
const [expanded, setExpanded] = useState