approaching a decent hlm skeleton

This commit is contained in:
mehbark 2023-07-15 14:51:17 -04:00
parent 48a39b1a08
commit ca9fd28ebc

View file

@ -1,11 +1,20 @@
import { Main, render_and_copy } from "./common.tsx"; import { EggbugImg, Main, render_and_copy } from "./common.tsx";
import { ComponentChildren, JSX, toChildArray } from "preact"; import { ComponentChildren, JSX, toChildArray } from "preact";
const Pulse = ({ children }: { children: ComponentChildren }): JSX.Element => ( const Pulse = ({ children }: { children: ComponentChildren }): JSX.Element => (
<div class="pulse"> <div class="pulse">
<div class="pulse-top">{...toChildArray(children)}</div>
<div class="pulse-bottom-bg" />
<div class="pulse-bottom">{...toChildArray(children)}</div> <div class="pulse-bottom">{...toChildArray(children)}</div>
<div class="pulse-top">{...toChildArray(children)}</div>
</div>
);
const Portrait = ({ href, alt }: { href: string; alt: string }) => (
<img class="portrait" href={href} alt={alt} />
);
const PortraitFrame = ({ children }: { children: ComponentChildren }) => (
<div class="portrait-frame">
<div class="portrait-frame-inner">{children}</div>
</div> </div>
); );
@ -20,7 +29,18 @@ const Pulse = ({ children }: { children: ComponentChildren }): JSX.Element => (
// i'll probably go for a different ui element // i'll probably go for a different ui element
render_and_copy( render_and_copy(
<Main> <Main>
<Pulse>homestuck</Pulse> <div class="top">press [rmb] to AWESOMESAUCE</div>
<Pulse>fortnite</Pulse> <div class="middle">
<div class="game"></div>
<PortraitFrame>
<EggbugImg type="smiling" />
</PortraitFrame>
</div>
<div class="bottom">
<Pulse>
FORTNITE BATTLE ROYALE PLAY FREE NOW AWESOME FUN GAME PLAY FOR
FREE NOW! WIN
</Pulse>
</div>
</Main> </Main>
); );