zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): tabs (#144)

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-29 12:43:03 -05:00
committed by GitHub
parent 419911f2f2
commit df4692dbda
35 changed files with 999 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/HomePageDemo/Base.tsx
+40 -10
View File
@@ -1,7 +1,8 @@
import type { Media, Skin } from '@/stores/homePageDemos';
import { useStore } from '@nanostores/react';
import { TabsPanel, TabsRoot } from '@/components/Tabs';
import { framework, media, skin } from '@/stores/homePageDemos';
import ClientCode from '../ClientCode';
import ClientCode from '../Code/ClientCode';
function generateHTMLCode(skin: Skin, media: Media): string {
const skinTag = `${skin}-skin`;
@@ -35,21 +36,50 @@ export const VideoPlayer = () => {
};`;
}
interface Props {
className?: string;
function generateCSS(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
export default function BaseDemo({ className }: Props) {
function generateJS(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
export default function BaseDemo({ className }: { className?: string }) {
const $framework = useStore(framework);
const $skin = useStore(skin);
const $media = useStore(media);
const code = $framework === 'html'
? generateHTMLCode($skin, $media)
: generateReactCode($skin, $media);
const lang = $framework === 'html' ? 'html' : 'tsx';
if ($framework === 'html') {
return (
<TabsRoot
id="base-html"
aria-label="HTML implementation"
titles={{ html: 'HTML', css: 'CSS', javascript: 'JavaScript' }}
className={className}
>
<TabsPanel tabsId="base-html" value="html">
<ClientCode code={generateHTMLCode($skin, $media)} lang="html" />
</TabsPanel>
<TabsPanel tabsId="base-html" value="css">
<ClientCode code={generateCSS($skin, $media)} lang="css" />
</TabsPanel>
<TabsPanel tabsId="base-html" value="javascript">
<ClientCode code={generateJS($skin, $media)} lang="javascript" />
</TabsPanel>
</TabsRoot>
);
}
return (
<ClientCode code={code} lang={lang} className={className} />
<TabsRoot
id="base-react"
aria-label="React implementation"
titles={{ react: 'React' }}
className={className}
>
<TabsPanel tabsId="base-react" value="react">
<ClientCode code={generateReactCode($skin, $media)} lang="tsx" />
</TabsPanel>
</TabsRoot>
);
}
site/src/components/HomePageDemo/Eject.tsx
+51 -16
View File
@@ -1,33 +1,68 @@
import type { Media, Skin } from '@/stores/homePageDemos';
import { useStore } from '@nanostores/react';
import { TabsPanel, TabsRoot } from '@/components/Tabs';
import { framework, media, skin } from '@/stores/homePageDemos';
import ClientCode from '../ClientCode';
import ClientCode from '../Code/ClientCode';
// eslint-disable-next-line unused-imports/no-unused-vars
function generateHTMLCode(skin: Skin, media: Media): string {
return `Coming soon`;
function generateHTMLCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
// eslint-disable-next-line unused-imports/no-unused-vars
function generateReactCode(skin: Skin, media: Media): string {
return `Coming soon`;
function generateReactCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
interface Props {
className?: string;
function generateCSSModuleCode(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
export default function EjectDemo({ className }: Props) {
function generateCSS(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
function generateJS(_skin: Skin, _media: Media): string {
return 'Coming soon';
}
export default function EjectDemo({ className }: { className?: string }) {
const $framework = useStore(framework);
const $skin = useStore(skin);
const $media = useStore(media);
const code = $framework === 'html'
? generateHTMLCode($skin, $media)
: generateReactCode($skin, $media);
const lang = $framework === 'html' ? 'html' : 'tsx';
if ($framework === 'html') {
return (
<TabsRoot
id="eject-html"
aria-label="HTML implementation"
titles={{ html: 'HTML', css: 'CSS', javascript: 'JavaScript' }}
className={className}
>
<TabsPanel tabsId="eject-html" value="html">
<ClientCode code={generateHTMLCode($skin, $media)} lang="html" />
</TabsPanel>
<TabsPanel tabsId="eject-html" value="css">
<ClientCode code={generateCSS($skin, $media)} lang="css" />
</TabsPanel>
<TabsPanel tabsId="eject-html" value="javascript">
<ClientCode code={generateJS($skin, $media)} lang="javascript" />
</TabsPanel>
</TabsRoot>
);
}
return (
<ClientCode code={code} lang={lang} className={className} />
<TabsRoot
id="eject-react"
aria-label="React implementation"
titles={{ react: 'React', css: 'CSS Module' }}
className={className}
>
<TabsPanel tabsId="eject-react" value="react">
<ClientCode code={generateReactCode($skin, $media)} lang="tsx" />
</TabsPanel>
<TabsPanel tabsId="eject-react" value="css">
<ClientCode code={generateCSSModuleCode($skin, $media)} lang="css" />
</TabsPanel>
</TabsRoot>
);
}
site/src/components/HomePageDemo/index.tsx
+2 -2
View File
@@ -14,14 +14,14 @@ export default function HomePageDemo({ className }: Props) {
<h2 className="text-h5 font-semibold lg:text-h4 mb-1">Assemble your player</h2>
<p>Feel at home with your framework, skin, and media source</p>
</header>
<BaseDemo className="lg:h-91" />
<BaseDemo className="lg:h-100" />
</section>
<section className="grid grid-rows-subgrid row-span-2 mb-6">
<header className="max-w-3xl">
<h2 className="text-h5 font-semibold lg:text-h4 mb-1">Take full control</h2>
<p>Make your player truly your own with fully-editable components</p>
</header>
<EjectDemo className="lg:h-91" />
<EjectDemo className="lg:h-100" />
</section>
</section>
);