import React, { useState } from "react"; import { useFireproof } from "use-fireproof"; import { callAI } from "call-ai"; export default function App() { const { database, useLiveQuery } = useFireproof("wacky-teacher-generator"); const { docs: teachers } = useLiveQuery("_id", { descending: true }); const [current, setCurrent] = useState(null); const [selected, setSelected] = useState(null); const [isLoading, setIsLoading] = useState(false); async function handleGenerate() { setIsLoading(true); try { const res = await callAI( "Generate a single wacky, silly, over-the-top fictional teacher. Make the name absurd and funny. Give them a ridiculous subject they teach, a catchphrase, and a short funny bio (2 sentences).", { schema: { properties: { name: { type: "string", description: "Absurd funny teacher name" }, subject: { type: "string", description: "Ridiculous subject they teach" }, catchphrase: { type: "string", description: "Their signature catchphrase" }, bio: { type: "string", description: "Short 2-sentence funny bio" }, }, }, } ); setCurrent(JSON.parse(res)); } finally { setIsLoading(false); } } async function handleSave() { if (!current) return; await database.put({ ...current, type: "teacher", savedAt: Date.now() }); setCurrent(null); } const c = { bg: "bg-[oklch(0.96_0.01_90)]", card: "bg-white border-[3px] border-[oklch(0.15_0.02_280)]", ink: "text-[oklch(0.15_0.02_280)]", muted: "text-[oklch(0.50_0.02_280)]", shadow: "[box-shadow:4px_4px_0px_oklch(0.15_0.02_280)]", shadowSm: "[box-shadow:3px_3px_0px_oklch(0.15_0.02_280)]", shadowHov: "hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px]", btnRed: "bg-[oklch(0.55_0.24_28)] text-white border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:4px_4px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 rounded-[4px] px-5 py-2 font-bold uppercase text-sm tracking-wider cursor-pointer", btnYellow: "bg-[oklch(0.85_0.18_85)] text-[oklch(0.15_0.02_280)] border-[3px] border-[oklch(0.15_0.02_280)] [box-shadow:3px_3px_0px_oklch(0.15_0.02_280)] hover:[box-shadow:6px_6px_0px_oklch(0.15_0.02_280)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:[box-shadow:none] transition-all duration-150 rounded-[4px] px-5 py-2 font-bold uppercase text-sm tracking-wider cursor-pointer", barRed: "bg-[oklch(0.55_0.24_28)]", barYellow: "bg-[oklch(0.85_0.18_85)]", barGreen: "bg-[oklch(0.62_0.19_145)]", barBlue: "bg-[oklch(0.52_0.18_255)]", mono: "font-['JetBrains_Mono',monospace]", heading: "font-['Space_Grotesk',sans-serif] font-bold uppercase tracking-tight", label: "text-[0.65rem] uppercase tracking-[0.15em] text-[oklch(0.50_0.02_280)]", }; return ( <>

{/* NAV */} {/* HERO */}

WACKY TEACHER GENERATOR

Generate ridiculous educators for your imagination

{/* CURRENT GENERATED */} {current && (

FRESH OFF THE ROSTER NEW

{current.name}

{current.subject}

"{current.catchphrase}"

{current.bio}

)} {/* ROSTER */}

TEACHER ROSTER

{teachers.length === 0 ? (

No teachers yet — generate one above!

) : (

{teachers.map((t) => (

setSelected(selected?._id === t._id ? null : t)} className="px-5 py-4 cursor-pointer hover:bg-[oklch(0.85_0.18_85)] transition-colors duration-100" >

{t.name}

{t.subject}

{selected?._id === t._id && (

"{t.catchphrase}"

{t.bio}

)}

))}

)}

); }