feat(site): simple api reference examples (#472)

This commit is contained in:
Darius Cepulis
2026-02-09 14:38:01 -06:00
committed by GitHub
parent 6b67428de3
commit fe56d8ca65
50 changed files with 1084 additions and 2 deletions
@@ -7,6 +7,18 @@ description: A button component for muting and unmuting audio playback
import ApiReference from "@/components/docs/api-reference/ApiReference.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import Demo from "@/components/docs/demos/Demo.astro";
{/* React demos */}
import BasicUsageDemoReact from "@/components/docs/demos/mute-button/react/css/BasicUsage";
import basicUsageReactTsx from "@/components/docs/demos/mute-button/react/css/BasicUsage.tsx?raw";
import basicUsageReactCss from "@/components/docs/demos/mute-button/react/css/BasicUsage.css?raw";
{/* HTML demos */}
import BasicUsageDemoHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/mute-button/html/css/BasicUsage.html?raw";
import basicUsageHtmlTs from "@/components/docs/demos/mute-button/html/css/BasicUsage.ts?raw";
## Anatomy
@@ -22,4 +34,30 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
```
</FrameworkCase>
## Examples
### Basic Usage
<FrameworkCase frameworks={["react"]}>
<StyleCase styles={["css"]}>
<Demo files={[
{ title: "App.tsx", code: basicUsageReactTsx, lang: "tsx" },
{ title: "App.css", code: basicUsageReactCss, lang: "css" },
]}>
<BasicUsageDemoReact client:idle />
</Demo>
</StyleCase>
</FrameworkCase>
<FrameworkCase frameworks={["html"]}>
<StyleCase styles={["css"]}>
<Demo files={[
{ title: "index.html", code: basicUsageHtml, lang: "html" },
{ title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
]}>
<BasicUsageDemoHtml />
</Demo>
</StyleCase>
</FrameworkCase>
<ApiReference component="MuteButton" />