impress/app/javascript/wardrobe-2020/WardrobePage/support/Metadata.js
Matchu 81b2a2b4a2 Bundle wardrobe-2020 into the app
We add jsbuilding-rails to get esbuild running in the app, and then we copy-paste the files we need from impress-2020 into here!

I stopped at the point where it was building successfully, but it's not running correctly: it's not sure about `process.env` in `next`, and I think the right next step is to delete the NextJS deps altogether and use React Router instead.
2023-10-23 19:05:08 -07:00

40 lines
792 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 };