Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import * as React from 'react';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
|
|
interface ButtonProps {
|
|
href: string;
|
|
children: React.ReactNode;
|
|
variant?: 'primary' | 'outline';
|
|
className?: string;
|
|
showArrow?: boolean;
|
|
}
|
|
|
|
export const Button: React.FC<ButtonProps> = ({
|
|
href,
|
|
children,
|
|
variant = 'primary',
|
|
className = "",
|
|
showArrow = true
|
|
}) => {
|
|
const baseStyles = "inline-flex items-center gap-4 rounded-full font-bold uppercase tracking-widest transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group";
|
|
|
|
const variants = {
|
|
primary: "px-10 py-5 bg-slate-900 text-white hover:bg-slate-800 hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-900/20 text-sm",
|
|
outline: "px-8 py-4 border border-slate-200 bg-white text-slate-900 hover:border-slate-400 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 text-sm"
|
|
};
|
|
|
|
const content = (
|
|
<>
|
|
{children}
|
|
{showArrow && <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />}
|
|
</>
|
|
);
|
|
|
|
if (href.startsWith('#')) {
|
|
return (
|
|
<a href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={href} className={`${baseStyles} ${variants[variant]} ${className}`}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export const MotionButton: React.FC<ButtonProps> = ({
|
|
href,
|
|
children,
|
|
variant = 'primary',
|
|
className = "",
|
|
showArrow = true
|
|
}) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<Button href={href} variant={variant} className={className} showArrow={showArrow}>
|
|
{children}
|
|
</Button>
|
|
</motion.div>
|
|
);
|
|
};
|