@kwtv/admin-components
Admin panel components for the KWTV website, built from the KWTV admin design. The package follows the same split as @kwtv/components: presentational components are Astro; controls that manage interaction are React islands. The admin has its own tuned light and dark colour sets, defined in admin.css.
Install
npm install @kwtv/admin-components @kwtv/tokensImport both stylesheets once in your app root:
---
import "@kwtv/tokens/tokens.css";
import "@kwtv/admin-components/styles/admin.css";
import AdminButton from "@kwtv/admin-components/astro/AdminButton.astro";
import AdminStatusBadge from "@kwtv/admin-components/astro/AdminStatusBadge.astro";
---
<div class="admin-theme">
<AdminButton variant="primary" icon="world-upload">
Publiceren
</AdminButton>
<AdminStatusBadge status="draft" />
</div>Astro components render native controls and semantic markup without a React bundle. Inputs, selects, checkboxes, choices, and section cards use native browser behaviour. The switch is a button with role="switch"; its Astro version ships a small script that toggles it, and renders a hidden input when it has a name. For controls with app state, add Astro's React integration and hydrate the island:
---
import AdminCodeInput from "@kwtv/admin-components/react/AdminCodeInput.tsx";
---
<AdminCodeInput client:load />Import several React components from @kwtv/admin-components/react when composing a React island. The React entry also includes presentational counterparts so those islands can stay self contained.
Wrap the admin in .admin-theme. Light is the default. Set data-theme="dark" on <html> to switch to the dark set, or use .admin-theme--light and .admin-theme--dark to pin a theme, for example to show both side by side in a gallery. is-hover, is-focus, and is-active classes pin interaction states for visual review.
Astro components
Icon, Button, IconButton, StatusBadge, Tag, LocaleMarks, Input, Select, PrefixInput, Switch, Checkbox, Choice, Avatar, Kbd, Thumb, Skeleton, Progress, Field, Alert, Note, SitePill, SaveState, Breadcrumbs, EmptyState, Meta, Steps, NavItem, Tooltip, PageHeader, Panel, Fields, RowList, Row, SiteStatus, SectionCard, SerpPreview.
React islands
Textarea (counter and meter), CodeInput (one field, so paste and autofill work), Segmented, FilterButton, Toast and Toasts (duration, pause on hover and focus), Tabs, LocaleSwitch, Pager, Search (keyboard shortcut), AccountMenu, TopBar, ListToolbar, DataTable, PublishPanel, SectionRow, InsertPoint, DropLine, Tree, TreeItem, RichText, MediaGrid, MediaTile, MediaField, RecoveryCodes, Dialog, Drawer.
Icons are Tabler glyphs rendered as inline SVG with the admin-ic class. They size with font-size. The Astro icon component embeds only the glyphs used by the library; React islands use @tabler/icons-react. Import Hanken Grotesk in the application as on the public site.