mirror of
https://gitea.gofwd.group/dstrawsb/ballistic-builder.git
synced 2025-12-06 02:36:44 -05:00
31 lines
915 B
TypeScript
31 lines
915 B
TypeScript
|
import { DataList as ChakraDataList } from "@chakra-ui/react"
|
||
|
|
import { InfoTip } from "./toggle-tip"
|
||
|
|
import * as React from "react"
|
||
|
|
|
||
|
|
export const DataListRoot = ChakraDataList.Root
|
||
|
|
|
||
|
|
interface ItemProps extends ChakraDataList.ItemProps {
|
||
|
|
label: React.ReactNode
|
||
|
|
value: React.ReactNode
|
||
|
|
info?: React.ReactNode
|
||
|
|
grow?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DataListItem = React.forwardRef<HTMLDivElement, ItemProps>(
|
||
|
|
function DataListItem(props, ref) {
|
||
|
|
const { label, info, value, children, grow, ...rest } = props
|
||
|
|
return (
|
||
|
|
<ChakraDataList.Item ref={ref} {...rest}>
|
||
|
|
<ChakraDataList.ItemLabel flex={grow ? "1" : undefined}>
|
||
|
|
{label}
|
||
|
|
{info && <InfoTip>{info}</InfoTip>}
|
||
|
|
</ChakraDataList.ItemLabel>
|
||
|
|
<ChakraDataList.ItemValue flex={grow ? "1" : undefined}>
|
||
|
|
{value}
|
||
|
|
</ChakraDataList.ItemValue>
|
||
|
|
{children}
|
||
|
|
</ChakraDataList.Item>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
)
|