701bbdea4a
All checks were successful
Deploy blog-frontend / build-and-deploy (push) Successful in 2m4s
31 lines
904 B
TypeScript
31 lines
904 B
TypeScript
import { clsx } from 'clsx';
|
|
import { HTMLAttributes } from 'react';
|
|
|
|
type SurfaceElement = 'div' | 'section' | 'article' | 'aside';
|
|
|
|
interface SurfaceProps extends HTMLAttributes<HTMLElement> {
|
|
as?: SurfaceElement;
|
|
strong?: boolean;
|
|
interactive?: boolean;
|
|
}
|
|
|
|
export default function Surface({
|
|
as: Component = 'div',
|
|
strong = false,
|
|
interactive = false,
|
|
className,
|
|
...props
|
|
}: SurfaceProps) {
|
|
return (
|
|
<Component
|
|
className={clsx(
|
|
'rounded-lg border border-[var(--color-line)] backdrop-blur-xl',
|
|
strong ? 'bg-[var(--color-surface-strong)] shadow-[var(--shadow-card)]' : 'bg-[var(--color-surface)] shadow-[var(--shadow-card)]',
|
|
interactive && 'transition duration-150 hover:border-black/15 hover:bg-[var(--color-surface-strong)] hover:shadow-[var(--shadow-control)] dark:hover:border-white/20',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|