Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
40 lines
745 B
JavaScript
40 lines
745 B
JavaScript
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 };
|