40 lines
939 B
TypeScript
40 lines
939 B
TypeScript
'use client'
|
|
|
|
export interface GenreBadgeProps {
|
|
name: string
|
|
onClick?: () => void
|
|
variant?: 'default' | 'outlined' | 'minimal'
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
export function GenreBadge({
|
|
name,
|
|
onClick,
|
|
variant = 'default',
|
|
size = 'md'
|
|
}: GenreBadgeProps) {
|
|
const sizeClasses = {
|
|
sm: 'px-2 py-0.5 text-xs',
|
|
md: 'px-3 py-1 text-sm',
|
|
lg: 'px-4 py-2 text-base'
|
|
}
|
|
|
|
const variantClasses = {
|
|
default: 'bg-purple-500/20 text-purple-300 hover:bg-purple-500/30',
|
|
outlined: 'bg-transparent border border-purple-500/50 text-purple-300 hover:border-purple-500',
|
|
minimal: 'bg-zinc-800 text-zinc-300 hover:bg-zinc-700'
|
|
}
|
|
|
|
const baseClasses = 'rounded-full font-medium transition cursor-pointer whitespace-nowrap'
|
|
const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]}`
|
|
|
|
return (
|
|
<span
|
|
className={classes}
|
|
onClick={onClick}
|
|
>
|
|
{name}
|
|
</span>
|
|
)
|
|
}
|