42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface SectionCardProps extends React.HTMLAttributes<HTMLElement> {
|
|
as?: 'section' | 'div';
|
|
}
|
|
|
|
export function SectionCard({ className, as: Tag = 'section', ...props }: SectionCardProps) {
|
|
return (
|
|
<Tag
|
|
className={cn(
|
|
'rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-white/5 dark:shadow-inner',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
interface SectionHeaderProps {
|
|
eyebrow?: string;
|
|
title: string;
|
|
description?: string;
|
|
endSlot?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function SectionHeader({ eyebrow, title, description, endSlot, className }: SectionHeaderProps) {
|
|
return (
|
|
<div className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between', className)}>
|
|
<div>
|
|
{eyebrow ? (
|
|
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-rose-500 dark:text-rose-200">{eyebrow}</p>
|
|
) : null}
|
|
<h2 className="text-lg font-semibold text-slate-900 dark:text-white">{title}</h2>
|
|
{description ? <p className="text-sm text-slate-600 dark:text-slate-300">{description}</p> : null}
|
|
</div>
|
|
{endSlot}
|
|
</div>
|
|
);
|
|
}
|