81 lines
3.8 KiB
TypeScript
81 lines
3.8 KiB
TypeScript
import { ArrowUpRight, Bot, Dices, Flame, Gamepad2, Sparkles } from "lucide-react";
|
|
import { cn } from "../utils/cn";
|
|
import { boardGames, hookahMixes, tobaccoFlavors } from "../data/catalog";
|
|
|
|
type Chip = {
|
|
href: string;
|
|
icon: typeof Dices;
|
|
label: string;
|
|
tone: "violet" | "cyan";
|
|
};
|
|
|
|
/* Подсветка постоянная (не только hover): на тач-устройствах hover нет,
|
|
иначе чипы там выглядят «не подсвеченными». Тона чередуем. */
|
|
const toneStyles = {
|
|
violet:
|
|
"border-neon-violet/50 bg-neon-violet/10 text-white shadow-[0_0_16px_-4px_rgba(176,38,255,0.55)] hover:border-neon-violet hover:bg-neon-violet/20 hover:shadow-[0_0_28px_-2px_rgba(176,38,255,0.8)]",
|
|
cyan: "border-neon-cyan/40 bg-neon-cyan/8 text-white shadow-[0_0_16px_-4px_rgba(0,240,255,0.5)] hover:border-neon-cyan hover:bg-neon-cyan/15 hover:shadow-[0_0_28px_-2px_rgba(0,240,255,0.75)]",
|
|
} as const;
|
|
|
|
const toneIcon = {
|
|
violet: { icon: "text-fuchsia-300", arrow: "text-fuchsia-200/70" },
|
|
cyan: { icon: "text-neon-cyan", arrow: "text-cyan-200/70" },
|
|
} as const;
|
|
|
|
/* 51 микс / 52 микса / 55 миксов — русское множественное для счётчика */
|
|
const mixPlural = (n: number): string => {
|
|
const mod10 = n % 10;
|
|
const mod100 = n % 100;
|
|
if (mod10 === 1 && mod100 !== 11) return `${n} микс`;
|
|
if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return `${n} микса`;
|
|
return `${n} миксов`;
|
|
};
|
|
|
|
const chips: Chip[] = [
|
|
{ href: "#/mixes", icon: Sparkles, label: mixPlural(hookahMixes.length), tone: "violet" },
|
|
{ href: "#/flavors", icon: Flame, label: `${tobaccoFlavors.length}+ вкусов табака`, tone: "cyan" },
|
|
{ href: "#/games", icon: Gamepad2, label: "PlayStation 5", tone: "violet" },
|
|
{ href: "#/board-games", icon: Dices, label: `${boardGames.length} настолок`, tone: "cyan" },
|
|
];
|
|
|
|
export default function HeroActions() {
|
|
return (
|
|
<div className="mt-10 flex flex-wrap gap-3">
|
|
<a
|
|
href="#/ai-mix"
|
|
className="group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border border-neon-cyan/60 bg-gradient-to-r from-neon-violet/25 via-neon-cyan/20 to-neon-violet/15 px-4.5 py-2.5 text-sm font-bold text-white backdrop-blur-lg shadow-[0_0_24px_rgba(0,240,255,0.35)] transition-all duration-300 hover:border-neon-cyan hover:shadow-[0_0_38px_rgba(0,240,255,0.65)] hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan"
|
|
>
|
|
<Bot size={16} className="shrink-0 text-neon-cyan" aria-hidden="true" />
|
|
<span>Автоподбор микса</span>
|
|
<ArrowUpRight
|
|
size={14}
|
|
className="shrink-0 text-cyan-200 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
|
|
{chips.map((chip) => (
|
|
<a
|
|
key={chip.href}
|
|
href={chip.href}
|
|
className={cn(
|
|
"group inline-flex min-h-11 max-w-full items-center gap-2.5 rounded-full border px-4 py-2.5 text-sm font-semibold text-white backdrop-blur-lg transition-all duration-300 hover:-translate-y-0.5 active:scale-[0.97] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-neon-cyan",
|
|
toneStyles[chip.tone]
|
|
)}
|
|
>
|
|
<chip.icon size={15} className={cn("shrink-0", toneIcon[chip.tone].icon)} aria-hidden="true" />
|
|
<span>{chip.label}</span>
|
|
<ArrowUpRight
|
|
size={14}
|
|
className={cn(
|
|
"shrink-0 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5",
|
|
toneIcon[chip.tone].arrow
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|