picobook/src/client/app.tsx

35 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-10-29 19:28:07 +00:00
import { css } from "@emotion/css";
import { Center, Cover, Stack } from "@firebox/components";
const App = (props: { name: string }) => {
const {name} = props;
return (
<Stack>
<div className={css`background-color: floralwhite;`}>
<Cover gap pad>
<Center>
<Stack gap={-1}>
<h1>Hello, {name}!</h1>
<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
</Stack>
</Center>
<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
</Cover>
</div>
<div className={css`background-color: aliceblue;`}>
<Cover gap pad>
<Center>
<Stack gap={-1}>
<h1>Hello, {name}!</h1>
<p>Welcome to a website with a certain design philosophy. Tell me how it's working out! I want to see this text wrap a few times. Hopefully this sentence will help.</p>
</Stack>
</Center>
<Cover.Footer>A page by Dylan Pizzo</Cover.Footer>
</Cover>
</div>
</Stack>
);
};
export const app = <App name="World" />;