33 lines
858 B
TypeScript
33 lines
858 B
TypeScript
|
import clsx from 'clsx'
|
||
|
|
import type { ComponentProps, ReactNode } from 'react'
|
||
|
|
|
||
|
|
export interface StackedListProps extends ComponentProps<'dl'> {
|
||
|
|
children: ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
export const StackedList = (props: StackedListProps) => {
|
||
|
|
const { className, ...rest } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<dl
|
||
|
|
className={clsx('bg-white/5 rounded border-2 border-white/25', 'divide-y-2 divide-white/25', className)}
|
||
|
|
{...rest}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface StackedListItemProps extends ComponentProps<'dt'> {
|
||
|
|
name: ReactNode
|
||
|
|
}
|
||
|
|
|
||
|
|
StackedList.Item = function StackedListItem(props: StackedListItemProps) {
|
||
|
|
const { name, className, ...rest } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-3 py-3 px-4 hover:bg-white/5">
|
||
|
|
<dd className="font-medium text-white/50">{name}</dd>
|
||
|
|
<dt className={clsx('col-span-2', className)} {...rest} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|