dylan/picobook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make react component

Browse Source
This commit is contained in:
dylan
2024-03-31 12:13:27 -07:00
parent 55fca0a5c2
commit d606a8002f
8 changed files with 117 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/client/app.tsx
View File

@@ -1,34 +1,16 @@
import { css } from "@emotion/css";
import { Center, Cover, Stack } from "@firebox/components";
import { Pico8Console } from "./pico8-client/Pico8Console";
import testcarts from "./testcarts";
const App = (props: { name: string }) => {
const {name} = props;
const App = (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>
<div className={css`
min-height: 100vh;
`}>
<Pico8Console carts={testcarts.carts} />
</div>
);
};
export const app = <App name="World" />;
export const app = <App />;