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

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 };