7615aa0e51
- Fix seed-products.ts TS error (implicit any) and BOM handling - Re-run full seed to restore correct Persian encoding in DB - Fix productService query→search param mismatch - Fix IngredientWiki hardcoded port 4000→use settingsStore - Restore seed-products-data.json from git after accidental corruption
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { motion } from "motion/react";
|
|
import { toPersian } from "../lib/utils";
|
|
|
|
interface HeaderButtonProps {
|
|
onClick?: () => void;
|
|
children: React.ReactNode;
|
|
variant?: "primary" | "secondary" | "outline" | "ghost";
|
|
className?: string;
|
|
badge?: number;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export default function HeaderButton({
|
|
onClick,
|
|
children,
|
|
variant = "primary",
|
|
className = "",
|
|
badge,
|
|
icon
|
|
}: HeaderButtonProps) {
|
|
const baseStyles = "relative flex flex-col items-center justify-center rounded-xl transition-all duration-300 font-vazir select-none cursor-pointer overflow-visible focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none";
|
|
|
|
const variants = {
|
|
primary: "bg-canina-blue text-white hover:bg-medical-gray-900 shadow-lg shadow-canina-blue/20",
|
|
secondary: "bg-medical-gray-50 text-medical-gray-600 hover:bg-medical-gray-100",
|
|
outline: "border-2 border-medical-gray-100 text-medical-gray-700 hover:border-canina-blue hover:text-canina-blue",
|
|
ghost: "text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canina-blue"
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
whileHover={{ y: -2 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={onClick}
|
|
className={`${baseStyles} ${variants[variant]} ${className}`}
|
|
>
|
|
{icon && <div className="mb-0.5">{icon}</div>}
|
|
<div className="whitespace-nowrap">{children}</div>
|
|
|
|
{badge !== undefined && badge > 0 && (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
className="absolute -top-1 -left-1 w-5 h-5 bg-red-500 text-white rounded-full border-2 border-white text-[8px] font-black flex items-center justify-center font-vazir"
|
|
>
|
|
{toPersian(badge.toString())}
|
|
</motion.div>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
}
|