35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
|
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" />;
|