import { JSX } from "preact"; import { DisappearOnClick, Main, render_and_copy, slidify } from "./common.tsx"; const Slide = ({ slide, next, n, max, }: { slide: JSX.Element; next?: JSX.Element; n: number; max: number; }) => next ? ( <div class="slide"> <details> <summary> <div class="slide-content">{slide}</div> <div class="slide-status"> {/* prob going to change this back to just n/max */} {n == max ? ( <span class="done"> thank you so much for reading! </span> ) : ( <span class="position"> {n}/{max} </span> )} </div> </summary> <div class="next">{next}</div> </details> </div> ) : ( <div class="slide-content">{slide}</div> ); // let 'em click to get rid of stuff // show that the names don't matter, their just symbols etc // (use homestuck pictures) render_and_copy( <Main> {slidify(Slide, [ <>homestuck</>, <>is cool</>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, <> bla bla <DisappearOnClick>this WILL disappear</DisappearOnClick>{" "} bla </>, ])} </Main> );