97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
"use client"
|
||
|
||
import * as React from "react"
|
||
import Link from "next/link"
|
||
import { Laptop, Smartphone, ShirtIcon, Home, Car, Baby, Dumbbell, BookOpen, Gift, MoreHorizontal } from 'lucide-react'
|
||
import {
|
||
NavigationMenu,
|
||
NavigationMenuContent,
|
||
NavigationMenuItem,
|
||
NavigationMenuLink,
|
||
NavigationMenuList,
|
||
NavigationMenuTrigger,
|
||
} from "@/components/ui/navigation-menu"
|
||
|
||
const categories = [
|
||
{
|
||
title: "Электроника",
|
||
icon: <Laptop className="w-5 h-5" />,
|
||
subcategories: ["Ноутбуки", "Планшеты", "Компьютеры", "Аксессуары"]
|
||
},
|
||
{
|
||
title: "Смартфоны и гаджеты",
|
||
icon: <Smartphone className="w-5 h-5" />,
|
||
subcategories: ["Телефоны", "Смарт-часы", "Наушники"]
|
||
},
|
||
{
|
||
title: "Одежда и обувь",
|
||
icon: <ShirtIcon className="w-5 h-5" />,
|
||
subcategories: ["Мужская одежда", "Женская одежда", "Обувь", "Аксессуары"]
|
||
},
|
||
{
|
||
title: "Дом и сад",
|
||
icon: <Home className="w-5 h-5" />,
|
||
subcategories: ["Мебель", "Текстиль", "Освещение", "Инструменты"]
|
||
},
|
||
{
|
||
title: "Авто",
|
||
icon: <Car className="w-5 h-5" />,
|
||
subcategories: ["Запчасти", "Шины", "Электроника", "Аксессуары"]
|
||
},
|
||
{
|
||
title: "Детские товары",
|
||
icon: <Baby className="w-5 h-5" />,
|
||
subcategories: ["Игрушки", "Питание", "Одежда", "Коляски"]
|
||
},
|
||
{
|
||
title: "Спорт и отдых",
|
||
icon: <Dumbbell className="w-5 h-5" />,
|
||
subcategories: ["Тренажеры", "Одежда", "Туризм"]
|
||
},
|
||
{
|
||
title: "Книги",
|
||
icon: <BookOpen className="w-5 h-5" />,
|
||
subcategories: ["Художественная", "Учебная", "Детская"]
|
||
},
|
||
{
|
||
title: "Подарки",
|
||
icon: <Gift className="w-5 h-5" />,
|
||
subcategories: ["Сувениры", "Цветы", "Подарочные наборы"]
|
||
},
|
||
]
|
||
|
||
export function CatalogMenu() {
|
||
return (
|
||
<NavigationMenu>
|
||
<NavigationMenuList>
|
||
<NavigationMenuItem>
|
||
<NavigationMenuTrigger>Каталог</NavigationMenuTrigger>
|
||
<NavigationMenuContent>
|
||
<div className="w-[500px] p-4">
|
||
<div className="grid gap-3">
|
||
{categories.map((category) => (
|
||
<Link
|
||
key={category.title}
|
||
href="#"
|
||
className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded-md group"
|
||
>
|
||
<span className="group-hover:text-blue-600">{category.icon}</span>
|
||
<div className="flex-1">
|
||
<div className="font-medium group-hover:text-blue-600">{category.title}</div>
|
||
<div className="text-sm text-gray-500">
|
||
{category.subcategories.join(" • ")}
|
||
</div>
|
||
</div>
|
||
<MoreHorizontal className="w-5 h-5 text-gray-400" />
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</NavigationMenuContent>
|
||
</NavigationMenuItem>
|
||
</NavigationMenuList>
|
||
</NavigationMenu>
|
||
)
|
||
}
|
||
|