Component Garden

A showcase of reusable UI components for char.build projects.

\n \n ${isLoggedIn ? `\n

Welcome, ${email.split(\"@\")[0]}!

You're now logged in across all char.build projects.

\n ` : ''}\n \n

How To Use

\n Import components from the shared library in your project:\n

\n// Component basics\nimport { Button, Input, Card, Alert, Badge, ScoreSelector, StatusMessage, EmptyState, IdeaScoreBar } from \"../../shared/components.tsx\";\n\n// Advanced components\nimport { EmojiScoreSelector } from \"../../shared/components/EmojiScoreSelector.tsx\";\nimport { DeleteConfirmationModal } from \"../../shared/components/DeleteConfirmationModal.tsx\";\nimport { ActionDropdown } from \"../../shared/components/ActionDropdown.tsx\";\nimport { TabContainer } from \"../../shared/components/TabContainer.tsx\";\nimport { CompactHeader, CharBuildBranding, UserAvatar, CountBadge } from \"../../shared/components/CompactHeader.tsx\";\n

\n \n

Install Component Garden

You can install Component Garden directly to your home screen!

On iOS: Use Safari's \"Share\" button and select \"Add to Home Screen\"

On Android: Look for the \"Add to Home Screen\" prompt or use Chrome's menu option

\n \n

Debug logs will appear here

\n \n

PWA Header Components

\n \n

CompactHeader with Branding

\n ${renderToString(\n }\n rightContent={\n

\n 🔔\n }\n style={{ marginRight: '0.75rem' }}\n />\n \n

\n }\n />\n )}\n

\n \n

\n// Using the header components\nimport { \n CompactHeader,\n CharBuildBranding,\n UserAvatar,\n CountBadge \n} from \"../../shared/components/CompactHeader.tsx\";\n\n// In your JSX\n}\n rightContent={\n <>\n }\n />\n \n \n }\n/>\n

\n \n

Button Component

\n \n

Variants

\n ${renderToString()}\n ${renderToString()}\n ${renderToString()}\n ${renderToString()}\n ${renderToString()}\n

\n \n

Sizes

\n ${renderToString()}\n ${renderToString()}\n ${renderToString()}\n

\n \n

States

\n ${renderToString()}\n ${renderToString()}\n

\n \n

\n\n\n\n

\n \n

DeleteConfirmationModal Component

\n \n

\n Note: The DeleteConfirmationModal component requires client-side JavaScript to function. Below is a contained preview.\n

\n \n

\n \n \n

↑ This modal is contained within its parent container and doesn't block scrolling below ↓

\n \n

You can continue to scroll and see other components.

\n \n

\n// In your component/state\nconst [isModalOpen, setIsModalOpen] = useState(false);\nconst [itemToDelete, setItemToDelete] = useState(null);\n\n// Function to handle opening the modal\nconst openDeleteModal = (item) => {\n setItemToDelete(item);\n setIsModalOpen(true);\n};\n\n// Function to handle deletion\nconst handleDelete = () => {\n if (itemToDelete) {\n deleteItem(itemToDelete.id);\n }\n};\n\n// In your JSX\n setIsModalOpen(false)}\n onConfirm={handleDelete}\n itemName={itemToDelete?.title}\n itemId={itemToDelete?.id}\n/>\n

\n\n \n \n \n \n \n`;\n };\n\n return new Response(generateHtml(), {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\"\n },\n });\n}","deleted","label",[170,171,152],"projects","componentgarden","permalink","https://www.val.town/x/dcm31/charBuildSuperapp/code/projects/componentgarden/handler.tsx","extension","actionData","errors"]