Matchu
81b2a2b4a2
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.
40 lines
792 B
JavaScript
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 };
|