34 lines
743 B
TypeScript
34 lines
743 B
TypeScript
import type { HTMLAttributes, ReactNode } from 'react'
|
|
|
|
import { classNames } from '../lib/class-names'
|
|
|
|
export type SurfaceElement = 'div' | 'section' | 'article' | 'aside'
|
|
export type SurfaceElevation = 'flat' | 'raised' | 'overlay'
|
|
|
|
export interface SurfaceProps extends HTMLAttributes<HTMLElement> {
|
|
readonly as?: SurfaceElement
|
|
readonly elevation?: SurfaceElevation
|
|
readonly children: ReactNode
|
|
}
|
|
|
|
export function Surface({
|
|
as: Component = 'div',
|
|
elevation = 'flat',
|
|
className,
|
|
children,
|
|
...props
|
|
}: SurfaceProps) {
|
|
return (
|
|
<Component
|
|
className={classNames(
|
|
'drb-surface',
|
|
`drb-surface--${elevation}`,
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Component>
|
|
)
|
|
}
|