@@ -0,0 +1,28 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import Icon from '@/components/site/icon';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type EyebrowProps = {
|
||||
icon?: string;
|
||||
className?: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
/** Small monospace label that sits above a heading. */
|
||||
export default function Eyebrow({ icon, className, children }: EyebrowProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'text-primary flex items-center gap-2 font-mono text-xs font-semibold tracking-wider uppercase',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{icon ? (
|
||||
<Icon name={icon} className="text-base" />
|
||||
) : (
|
||||
<span className="bg-primary-container h-1 w-6 rounded-full" />
|
||||
)}
|
||||
<span>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user