impress/app/javascript/wardrobe-2020/WardrobePage/support/Metadata.js

41 lines
745 B
JavaScript
Raw Normal View History

import * as React from "react";
import { Box } from "@chakra-ui/react";
/**
* Metadata is a UI component for showing metadata about something, as labels
* and their values.
*/
function Metadata({ children, ...props }) {
return (
<Box
as="dl"
display="grid"
gridTemplateColumns="max-content auto"
gridRowGap="1"
gridColumnGap="2"
{...props}
>
{children}
</Box>
);
}
function MetadataLabel({ children, ...props }) {
return (
<Box as="dt" gridColumn="1" fontWeight="bold" {...props}>
{children}
</Box>
);
}
function MetadataValue({ children, ...props }) {
return (
<Box as="dd" gridColumn="2" {...props}>
{children}
</Box>
);
}
export default Metadata;
export { MetadataLabel, MetadataValue };