🐟 Tuna

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_332":333,"_334":335},"routes/_app.x.$handle.$name",{"_100":99,"_32":46,"_109":90,"_27":37,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":61,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":61,"_63":64,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",46,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","proto/old-example-TODO.tsx","latestPath","fileId","c77da682-1eb8-11f0-a6dc-569c3dd06744","name","old-example-TODO.tsx","fileType","script","content","","// Example of using tuna and caviar with React (resrv) on Val Town\n// what does the save button do?\n\n/** @jsxImportSource https://esm.sh/react */\nimport { caviar } from \"https://esm.town/v/jxnblk/caviar\";\nimport resrv, { React } from \"https://esm.town/v/jxnblk/resrv\";\nimport { css } from \"https://esm.town/v/jxnblk/tuna\";\nimport ValBadge from \"https://esm.town/v/jxnblk/val_badge_react\";\n\n// Helper for using CSS vars\nconst vars = caviar({\n light: {\n text: \"#013\",\n bg: \"#fff\",\n highlight: \"#0cf\",\n },\n dark: {\n text: \"#fff\",\n bg: \"#013\",\n highlight: \"#0cf\",\n },\n});\n\nconst styles = css({\n body: { // special keyword\n fontFamily: \"Lexend, system-ui, sans-serif\",\n margin: 0,\n color: vars.text,\n backgroundColor: vars.bg,\n },\n container: {\n padding: \"32px\",\n margin: \"0 auto\",\n maxWidth: \"1024px\",\n },\n title: {\n margin: 0,\n fontSize: 48,\n lineHeight: \"1.0\",\n \"@media screen and (min-width: 768px)\": {\n fontSize: 64,\n },\n },\n input: {\n fontFamily: \"inherit\",\n fontSize: \"inherit\",\n lineHeight: \"1.5\",\n padding: \"2px 8px\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n borderColor: vars.text,\n borderRadius: \"4px\",\n \"&:focus\": {\n borderColor: vars.highlight,\n },\n },\n colorModeButton: {\n position: \"fixed\",\n top: 0,\n right: 0,\n margin: \"16px\",\n },\n});\n\nconst modes = [\"light\", \"dark\"];\n\nfunction App({ script }) {\n const [mode, setMode] = React.useState(\"light\");\n\n const toggleMode = e => {\n e.preventDefault();\n const i = (modes.indexOf(mode) + 1) % modes.length;\n setMode(modes[i]);\n };\n\n return (\n <>\n \n 🐟 Tuna\n \n \n \n \n \n

Diff · v46