/** * This val creates a tech stack inventory chooser using React and Tailwind CSS for styling. * It allows users to select technologies for different categories and displays the chosen stack. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const techCategories = { frontend: ["React", "Vue", "Angular", "Svelte"], backend: ["Node.js", "Python", "Ruby", "Java"], database: ["PostgreSQL", "MongoDB", "MySQL", "SQLite"], hosting: ["AWS", "Google Cloud", "Heroku", "DigitalOcean"], }; function App() { const [selectedTech, setSelectedTech] = useState({}); const handleTechSelect = (category, tech) => { setSelectedTech(prev => ({ ...prev, [category]: tech })); }; return (

Tech Stack Chooser

{Object.entries(techCategories).map(([category, technologies]) => (

{category}

{technologies.map(tech => ( ))}

))}

Your Chosen Stack:

{category}: {tech}

View source on Val Town

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Tech Stack Chooser

`, { headers: { "Content-Type": "text/html" }, }); } export default server;

techstackinventory