mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat(site): simple api reference examples (#472)
This commit is contained in:
Darius Cepulis
Generated
+6
@@ -397,9 +397,15 @@ importers:
|
||||
'@tailwindcss/vite':
|
||||
specifier: ^4.1.17
|
||||
version: 4.1.18(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.21.0)(yaml@2.8.2))
|
||||
'@videojs/html':
|
||||
specifier: workspace:*
|
||||
version: link:../packages/html
|
||||
'@videojs/html-preview':
|
||||
specifier: workspace:*
|
||||
version: link:../packages/__tech-preview__/html
|
||||
'@videojs/react':
|
||||
specifier: workspace:*
|
||||
version: link:../packages/react
|
||||
'@videojs/react-preview':
|
||||
specifier: workspace:*
|
||||
version: link:../packages/__tech-preview__/react
|
||||
|
||||
+101
-1
@@ -141,7 +141,9 @@ This limits the classnames Tailwind must generate.
|
||||
site/
|
||||
├── src/
|
||||
│ ├── components/ # Astro + React components
|
||||
│ │ └── docs/api-reference/ # API reference Astro components
|
||||
│ │ └── docs/
|
||||
│ │ ├── api-reference/ # API reference Astro components
|
||||
│ │ └── demos/ # Interactive component demos (see below)
|
||||
│ ├── content/ # Content collections (blog/, docs/, authors.json)
|
||||
│ ├── layouts/ # Page layouts (Base, Blog, Docs, Markdown)
|
||||
│ ├── pages/ # Route pages (file-based routing)
|
||||
@@ -168,6 +170,104 @@ site/
|
||||
└── vitest.config.ts # Test configuration
|
||||
```
|
||||
|
||||
## Interactive Demos
|
||||
|
||||
Reference pages include live, interactive demos for each component. Demos are framework-specific (React, HTML) and style-specific (CSS).
|
||||
|
||||
### Directory Structure
|
||||
|
||||
```
|
||||
src/components/docs/demos/
|
||||
├── Demo.astro # Shared shell (live preview + tabbed source code)
|
||||
├── HtmlDemo.astro # Renders raw HTML via set:html
|
||||
└── {component}/{framework}/{style}/
|
||||
├── BasicUsage.tsx # React: component (+ .css)
|
||||
├── BasicUsage.astro # HTML: Astro wrapper (renders HTML + bundles script)
|
||||
├── BasicUsage.html # HTML: markup + <style>, no <script>
|
||||
└── BasicUsage.ts # HTML: side-effect imports for custom element registration
|
||||
```
|
||||
|
||||
### CSS Scoping with BEM
|
||||
|
||||
Demos use BEM class names for scoping. Block = `{component}-{variant}`, element = `__{part}`:
|
||||
|
||||
```
|
||||
.play-button-basic /* block */
|
||||
.play-button-basic__button /* element */
|
||||
```
|
||||
|
||||
React `.css` and HTML `<style>` blocks for the same demo should use identical BEM names.
|
||||
|
||||
### React Demos
|
||||
|
||||
A `.tsx` component + `.css` file. Rendered as an Astro island via `client:idle`, displayed as source via `?raw`:
|
||||
|
||||
```mdx
|
||||
import BasicUsageDemo from "@/components/docs/demos/play-button/react/css/BasicUsage";
|
||||
import basicUsageTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw";
|
||||
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: basicUsageTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: basicUsageCss, lang: "css" },
|
||||
]}>
|
||||
<BasicUsageDemo client:idle />
|
||||
</Demo>
|
||||
```
|
||||
|
||||
### HTML Demos
|
||||
|
||||
Three files per demo: `.html` (markup + style), `.ts` (custom element registration), and `.astro` (wrapper that ties them together). The `.astro` wrapper is needed because only Astro `<script>` tags go through Vite's bundling pipeline — MDX `<script>` tags compile as JSX and aren't bundled.
|
||||
|
||||
**`.astro` wrapper** (renders HTML + bundles the `.ts` script):
|
||||
```astro
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
---
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
```
|
||||
|
||||
**MDX usage:**
|
||||
```mdx
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/play-button/html/css/BasicUsage.ts?raw";
|
||||
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: basicUsageHtml, lang: "html" },
|
||||
{ title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<BasicUsageDemoHtml />
|
||||
</Demo>
|
||||
```
|
||||
|
||||
### State Reflection in HTML Demos
|
||||
|
||||
HTML custom elements expose state via `data-*` attributes. Use CSS to toggle labels:
|
||||
|
||||
```html
|
||||
<media-play-button class="play-button-basic__button">
|
||||
<span class="show-when-paused">Play</span>
|
||||
<span class="show-when-playing">Pause</span>
|
||||
</media-play-button>
|
||||
```
|
||||
```css
|
||||
.play-button-basic__button .show-when-paused { display: none; }
|
||||
.play-button-basic__button .show-when-playing { display: none; }
|
||||
.play-button-basic__button[data-paused] .show-when-paused { display: inline; }
|
||||
.play-button-basic__button:not([data-paused]) .show-when-playing { display: inline; }
|
||||
```
|
||||
|
||||
The React equivalent uses the `render` prop: `render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}`.
|
||||
|
||||
### Video Attributes
|
||||
|
||||
All demo videos use `autoplay muted playsinline loop` (React: `autoPlay muted playsInline loop`).
|
||||
|
||||
## Multi-Framework Documentation Architecture
|
||||
|
||||
### Framework/Style Combinations
|
||||
|
||||
@@ -74,7 +74,7 @@ export default defineConfig({
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
optimizeDeps: {
|
||||
exclude: ['@videojs/react-preview'],
|
||||
exclude: ['@videojs/react-preview', '@videojs/react', '@videojs/html'],
|
||||
},
|
||||
resolve: {
|
||||
dedupe: ['react', 'react-dom'],
|
||||
|
||||
@@ -27,7 +27,9 @@
|
||||
"@pagefind/default-ui": "^1.4.0",
|
||||
"@sentry/astro": "^10.32.1",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"@videojs/html": "workspace:*",
|
||||
"@videojs/html-preview": "workspace:*",
|
||||
"@videojs/react": "workspace:*",
|
||||
"@videojs/react-preview": "workspace:*",
|
||||
"astro": "^5.14.4",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
import type { BundledLanguage } from 'shiki';
|
||||
|
||||
import ServerCode from '@/components/Code/ServerCode.astro';
|
||||
import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
|
||||
|
||||
interface FileTab {
|
||||
title: string;
|
||||
code: string;
|
||||
lang: BundledLanguage;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
files: FileTab[];
|
||||
}
|
||||
|
||||
const { files } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
|
||||
<div class="relative z-20 p-6 bg-light-80 dark:bg-dark-100">
|
||||
<slot />
|
||||
</div>
|
||||
<TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
|
||||
<TabsList client:idle label="Demo source code">
|
||||
{files.map((file, i) => (
|
||||
<Tab client:idle value={file.title} initial={i === 0}>
|
||||
{file.title}
|
||||
</Tab>
|
||||
))}
|
||||
</TabsList>
|
||||
{files.map((file, i) => (
|
||||
<TabsPanel client:idle value={file.title} initial={i === 0}>
|
||||
<ServerCode code={file.code} lang={file.lang} />
|
||||
</TabsPanel>
|
||||
))}
|
||||
</TabsRoot>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
interface Props {
|
||||
html: string;
|
||||
}
|
||||
const { html } = Astro.props;
|
||||
---
|
||||
|
||||
<Fragment set:html={html} />
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<style>
|
||||
.fullscreen-button-basic {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.fullscreen-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullscreen-button-basic__button .show-when-fullscreen { display: none; }
|
||||
.fullscreen-button-basic__button .show-when-not-fullscreen { display: none; }
|
||||
.fullscreen-button-basic__button[data-fullscreen] .show-when-fullscreen { display: inline; }
|
||||
.fullscreen-button-basic__button:not([data-fullscreen]) .show-when-not-fullscreen { display: inline; }
|
||||
</style>
|
||||
|
||||
<video-player class="fullscreen-button-basic">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-fullscreen-button class="fullscreen-button-basic__button">
|
||||
<span class="show-when-fullscreen">Exit Fullscreen</span>
|
||||
<span class="show-when-not-fullscreen">Fullscreen</span>
|
||||
</media-fullscreen-button>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/fullscreen-button';
|
||||
@@ -0,0 +1,19 @@
|
||||
.fullscreen-button-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreen-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.fullscreen-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { createPlayer, FullscreenButton, features, Video } from '@videojs/react';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="fullscreen-button-basic">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<FullscreenButton
|
||||
className="fullscreen-button-basic__button"
|
||||
render={(props, state) => <button {...props}>{state.fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}</button>}
|
||||
/>
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<style>
|
||||
.mute-button-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mute-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mute-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mute-button-basic__button .show-when-muted { display: none; }
|
||||
.mute-button-basic__button .show-when-unmuted { display: none; }
|
||||
.mute-button-basic__button[data-muted] .show-when-muted { display: inline; }
|
||||
.mute-button-basic__button:not([data-muted]) .show-when-unmuted { display: inline; }
|
||||
</style>
|
||||
|
||||
<video-player class="mute-button-basic">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-mute-button class="mute-button-basic__button">
|
||||
<span class="show-when-muted">Unmute</span>
|
||||
<span class="show-when-unmuted">Mute</span>
|
||||
</media-mute-button>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/mute-button';
|
||||
@@ -0,0 +1,19 @@
|
||||
.mute-button-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mute-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mute-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { createPlayer, features, MuteButton, Video } from '@videojs/react';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="mute-button-basic">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<MuteButton
|
||||
className="mute-button-basic__button"
|
||||
render={(props, state) => <button {...props}>{state.muted ? 'Unmute' : 'Mute'}</button>}
|
||||
/>
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './BasicUsage.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './BasicUsage.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<style>
|
||||
.play-button-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.play-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play-button-basic__button .show-when-paused { display: none; }
|
||||
.play-button-basic__button .show-when-playing { display: none; }
|
||||
.play-button-basic__button[data-paused] .show-when-paused { display: inline; }
|
||||
.play-button-basic__button:not([data-paused]) .show-when-playing { display: inline; }
|
||||
</style>
|
||||
|
||||
<video-player class="play-button-basic">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-play-button class="play-button-basic__button">
|
||||
<span class="show-when-paused">Play</span>
|
||||
<span class="show-when-playing">Pause</span>
|
||||
</media-play-button>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/play-button';
|
||||
@@ -0,0 +1,19 @@
|
||||
.play-button-basic {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.play-button-basic video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.play-button-basic__button {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding-inline: 12px;
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { createPlayer, features, PlayButton, Video } from '@videojs/react';
|
||||
|
||||
import './BasicUsage.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function BasicUsage() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="play-button-basic">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<PlayButton
|
||||
className="play-button-basic__button"
|
||||
render={(props, state) => <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>}
|
||||
/>
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './CurrentDuration.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './CurrentDuration.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<style>
|
||||
.time-current-duration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-current-duration video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-current-duration__group {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
|
||||
<video-player class="time-current-duration">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time-group class="time-current-duration__group">
|
||||
<media-time type="current"></media-time>
|
||||
<media-time-separator></media-time-separator>
|
||||
<media-time type="duration"></media-time>
|
||||
</media-time-group>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time';
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './CurrentTime.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './CurrentTime.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
.time-current-time {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-current-time video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-current-time__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
|
||||
<video-player class="time-current-time">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time class="time-current-time__value" type="current"></media-time>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time';
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './CustomNegativeSign.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './CustomNegativeSign.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
.time-custom-negative-sign {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-custom-negative-sign video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-custom-negative-sign__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
|
||||
<video-player class="time-custom-negative-sign">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time class="time-custom-negative-sign__value" type="remaining" negative-sign="−"></media-time>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time';
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './CustomSeparator.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './CustomSeparator.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<style>
|
||||
.time-custom-separator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-custom-separator video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-custom-separator__group {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
|
||||
<video-player class="time-custom-separator">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time-group class="time-custom-separator__group">
|
||||
<media-time type="current"></media-time>
|
||||
<media-time-separator> of </media-time-separator>
|
||||
<media-time type="duration"></media-time>
|
||||
</media-time-group>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time';
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import HtmlDemo from '@/components/docs/demos/HtmlDemo.astro';
|
||||
import html from './Remaining.html?raw';
|
||||
---
|
||||
|
||||
<HtmlDemo html={html} />
|
||||
<script>
|
||||
import './Remaining.ts';
|
||||
</script>
|
||||
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
.time-remaining {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-remaining video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-remaining__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
|
||||
<video-player class="time-remaining">
|
||||
<video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoplay
|
||||
muted
|
||||
playsinline
|
||||
loop
|
||||
></video>
|
||||
<media-time class="time-remaining__value" type="remaining"></media-time>
|
||||
</video-player>
|
||||
@@ -0,0 +1,2 @@
|
||||
import '@videojs/html/video/player';
|
||||
import '@videojs/html/ui/time';
|
||||
@@ -0,0 +1,12 @@
|
||||
.time-current-duration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-current-duration video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-current-duration__group {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createPlayer, features, Time, Video } from '@videojs/react';
|
||||
|
||||
import './CurrentDuration.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function CurrentDuration() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="time-current-duration">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<Time.Group className="time-current-duration__group">
|
||||
<Time.Value type="current" />
|
||||
<Time.Separator />
|
||||
<Time.Value type="duration" />
|
||||
</Time.Group>
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.time-current-time {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-current-time video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-current-time__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { createPlayer, features, Time, Video } from '@videojs/react';
|
||||
|
||||
import './CurrentTime.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function CurrentTime() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="time-current-time">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<Time.Value type="current" className="time-current-time__value" />
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.time-custom-negative-sign {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-custom-negative-sign video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-custom-negative-sign__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { createPlayer, features, Time, Video } from '@videojs/react';
|
||||
|
||||
import './CustomNegativeSign.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function CustomNegativeSign() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="time-custom-negative-sign">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<Time.Value type="remaining" negativeSign={'\u2212'} className="time-custom-negative-sign__value" />
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.time-custom-separator {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-custom-separator video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-custom-separator__group {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { createPlayer, features, Time, Video } from '@videojs/react';
|
||||
|
||||
import './CustomSeparator.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function CustomSeparator() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="time-custom-separator">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<Time.Group className="time-custom-separator__group">
|
||||
<Time.Value type="current" />
|
||||
<Time.Separator> of </Time.Separator>
|
||||
<Time.Value type="duration" />
|
||||
</Time.Group>
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.time-remaining {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.time-remaining video {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.time-remaining__value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { createPlayer, features, Time, Video } from '@videojs/react';
|
||||
|
||||
import './Remaining.css';
|
||||
|
||||
const Player = createPlayer({ features: [...features.video] });
|
||||
|
||||
export default function Remaining() {
|
||||
return (
|
||||
<Player.Provider>
|
||||
<Player.Container className="time-remaining">
|
||||
<Video
|
||||
src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
loop
|
||||
/>
|
||||
<Time.Value type="remaining" className="time-remaining__value" />
|
||||
</Player.Container>
|
||||
</Player.Provider>
|
||||
);
|
||||
}
|
||||
@@ -7,6 +7,18 @@ description: A button component for entering and exiting fullscreen mode
|
||||
|
||||
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/fullscreen-button/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/fullscreen-button/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/fullscreen-button/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/fullscreen-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="FullscreenButton" />
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -7,6 +7,18 @@ description: A button component for playing and pausing media 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/play-button/react/css/BasicUsage";
|
||||
import basicUsageReactTsx from "@/components/docs/demos/play-button/react/css/BasicUsage.tsx?raw";
|
||||
import basicUsageReactCss from "@/components/docs/demos/play-button/react/css/BasicUsage.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import BasicUsageDemoHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.astro";
|
||||
import basicUsageHtml from "@/components/docs/demos/play-button/html/css/BasicUsage.html?raw";
|
||||
import basicUsageHtmlTs from "@/components/docs/demos/play-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="PlayButton" />
|
||||
|
||||
@@ -7,6 +7,46 @@ description: Components for displaying and composing media time information
|
||||
|
||||
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 CurrentTimeDemoReact from "@/components/docs/demos/time/react/css/CurrentTime";
|
||||
import currentTimeReactTsx from "@/components/docs/demos/time/react/css/CurrentTime.tsx?raw";
|
||||
import currentTimeReactCss from "@/components/docs/demos/time/react/css/CurrentTime.css?raw";
|
||||
|
||||
import CurrentDurationDemoReact from "@/components/docs/demos/time/react/css/CurrentDuration";
|
||||
import currentDurationReactTsx from "@/components/docs/demos/time/react/css/CurrentDuration.tsx?raw";
|
||||
import currentDurationReactCss from "@/components/docs/demos/time/react/css/CurrentDuration.css?raw";
|
||||
|
||||
import RemainingDemoReact from "@/components/docs/demos/time/react/css/Remaining";
|
||||
import remainingReactTsx from "@/components/docs/demos/time/react/css/Remaining.tsx?raw";
|
||||
import remainingReactCss from "@/components/docs/demos/time/react/css/Remaining.css?raw";
|
||||
|
||||
import CustomSeparatorDemoReact from "@/components/docs/demos/time/react/css/CustomSeparator";
|
||||
import customSeparatorReactTsx from "@/components/docs/demos/time/react/css/CustomSeparator.tsx?raw";
|
||||
import customSeparatorReactCss from "@/components/docs/demos/time/react/css/CustomSeparator.css?raw";
|
||||
|
||||
import CustomNegativeSignDemoReact from "@/components/docs/demos/time/react/css/CustomNegativeSign";
|
||||
import customNegativeSignReactTsx from "@/components/docs/demos/time/react/css/CustomNegativeSign.tsx?raw";
|
||||
import customNegativeSignReactCss from "@/components/docs/demos/time/react/css/CustomNegativeSign.css?raw";
|
||||
|
||||
{/* HTML demos */}
|
||||
import CurrentTimeDemoHtml from "@/components/docs/demos/time/html/css/CurrentTime.astro";
|
||||
import currentTimeHtml from "@/components/docs/demos/time/html/css/CurrentTime.html?raw";
|
||||
import currentTimeHtmlTs from "@/components/docs/demos/time/html/css/CurrentTime.ts?raw";
|
||||
import CurrentDurationDemoHtml from "@/components/docs/demos/time/html/css/CurrentDuration.astro";
|
||||
import currentDurationHtml from "@/components/docs/demos/time/html/css/CurrentDuration.html?raw";
|
||||
import currentDurationHtmlTs from "@/components/docs/demos/time/html/css/CurrentDuration.ts?raw";
|
||||
import RemainingDemoHtml from "@/components/docs/demos/time/html/css/Remaining.astro";
|
||||
import remainingHtml from "@/components/docs/demos/time/html/css/Remaining.html?raw";
|
||||
import remainingHtmlTs from "@/components/docs/demos/time/html/css/Remaining.ts?raw";
|
||||
import CustomSeparatorDemoHtml from "@/components/docs/demos/time/html/css/CustomSeparator.astro";
|
||||
import customSeparatorHtml from "@/components/docs/demos/time/html/css/CustomSeparator.html?raw";
|
||||
import customSeparatorHtmlTs from "@/components/docs/demos/time/html/css/CustomSeparator.ts?raw";
|
||||
import CustomNegativeSignDemoHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.astro";
|
||||
import customNegativeSignHtml from "@/components/docs/demos/time/html/css/CustomNegativeSign.html?raw";
|
||||
import customNegativeSignHtmlTs from "@/components/docs/demos/time/html/css/CustomNegativeSign.ts?raw";
|
||||
|
||||
## Anatomy
|
||||
|
||||
@@ -30,4 +70,126 @@ import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||||
```
|
||||
</FrameworkCase>
|
||||
|
||||
## Examples
|
||||
|
||||
### Current Time
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: currentTimeReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: currentTimeReactCss, lang: "css" },
|
||||
]}>
|
||||
<CurrentTimeDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: currentTimeHtml, lang: "html" },
|
||||
{ title: "index.ts", code: currentTimeHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<CurrentTimeDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
### Current / Duration
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: currentDurationReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: currentDurationReactCss, lang: "css" },
|
||||
]}>
|
||||
<CurrentDurationDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: currentDurationHtml, lang: "html" },
|
||||
{ title: "index.ts", code: currentDurationHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<CurrentDurationDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
### Remaining
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: remainingReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: remainingReactCss, lang: "css" },
|
||||
]}>
|
||||
<RemainingDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: remainingHtml, lang: "html" },
|
||||
{ title: "index.ts", code: remainingHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<RemainingDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
### Custom Separator
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: customSeparatorReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: customSeparatorReactCss, lang: "css" },
|
||||
]}>
|
||||
<CustomSeparatorDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: customSeparatorHtml, lang: "html" },
|
||||
{ title: "index.ts", code: customSeparatorHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<CustomSeparatorDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
### Custom Negative Sign
|
||||
|
||||
<FrameworkCase frameworks={["react"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "App.tsx", code: customNegativeSignReactTsx, lang: "tsx" },
|
||||
{ title: "App.css", code: customNegativeSignReactCss, lang: "css" },
|
||||
]}>
|
||||
<CustomNegativeSignDemoReact client:idle />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<FrameworkCase frameworks={["html"]}>
|
||||
<StyleCase styles={["css"]}>
|
||||
<Demo files={[
|
||||
{ title: "index.html", code: customNegativeSignHtml, lang: "html" },
|
||||
{ title: "index.ts", code: customNegativeSignHtmlTs, lang: "ts" },
|
||||
]}>
|
||||
<CustomNegativeSignDemoHtml />
|
||||
</Demo>
|
||||
</StyleCase>
|
||||
</FrameworkCase>
|
||||
|
||||
<ApiReference component="Time" />
|
||||
|
||||
Reference in New Issue
Block a user