mirror of
https://github.com/zoriya/v10.git
synced 2026-08-05 05:37:21 +00:00
feat(sandbox): dark mode support and template entry files (#781)
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sam Potts
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
b081b7f7ff
commit
43711315cd
@@ -1,3 +1 @@
|
||||
src/*
|
||||
!src/index.html
|
||||
!src/main.tsx
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sandbox</title>
|
||||
<link rel="preconnect" href="https://rsms.me/" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body class="font-sans text-zinc-950 antialiased h-screen overflow-hidden">
|
||||
<div id="root" class="h-full"></div>
|
||||
<script type="module" src="./main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,4 @@
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { App } from './shell/app';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(<App />);
|
||||
@@ -53,10 +53,12 @@ export function Navbar({
|
||||
sources,
|
||||
}: NavbarProps) {
|
||||
return (
|
||||
<header className="shrink-0 border-b border-zinc-200 bg-white flex items-center px-4 h-14 gap-6">
|
||||
<span className="text-sm font-semibold tracking-tight whitespace-nowrap text-zinc-950">Video.js v10</span>
|
||||
<header className="shrink-0 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 flex items-center px-4 h-14 gap-6">
|
||||
<span className="text-sm font-semibold tracking-tight whitespace-nowrap text-zinc-950 dark:text-zinc-50">
|
||||
Video.js v10
|
||||
</span>
|
||||
|
||||
<div className="h-5 w-px bg-zinc-200" />
|
||||
<div className="h-5 w-px bg-zinc-200 dark:bg-zinc-800" />
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Select
|
||||
@@ -106,7 +108,7 @@ export function Navbar({
|
||||
href="https://github.com/videojs/v10"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center justify-center size-8 rounded-md text-zinc-500 hover:text-zinc-950 hover:bg-zinc-100 transition-colors"
|
||||
className="inline-flex items-center justify-center size-8 rounded-md text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-zinc-50 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
|
||||
>
|
||||
<span className="sr-only">GitHub repository</span>
|
||||
<svg
|
||||
@@ -145,13 +147,13 @@ type SelectProps = {
|
||||
function Select({ label, value, onChange, options, disabled }: SelectProps) {
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[13px] font-medium text-zinc-500">{label}</span>
|
||||
<span className="text-[13px] font-medium text-zinc-500 dark:text-zinc-400">{label}</span>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
disabled={disabled}
|
||||
className="h-8 appearance-none rounded-md border-none bg-clip-border ring ring-zinc-800/10 bg-white pl-3 pr-8 text-[13px] font-medium text-zinc-950 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 focus:outline-2 focus:outline-zinc-950 focus:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
||||
className="h-8 appearance-none rounded-md border-none bg-clip-border ring ring-zinc-800/10 dark:ring-white/10 bg-white dark:bg-zinc-900 pl-3 pr-8 text-[13px] font-medium text-zinc-950 dark:text-zinc-50 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-900 focus:outline-2 focus:outline-zinc-950 dark:focus:outline-zinc-50 focus:outline-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value} disabled={opt.disabled}>
|
||||
@@ -160,7 +162,7 @@ function Select({ label, value, onChange, options, disabled }: SelectProps) {
|
||||
))}
|
||||
</select>
|
||||
<svg
|
||||
className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-3.5 text-zinc-500"
|
||||
className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-3.5 text-zinc-500 dark:text-zinc-400"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
|
||||
@@ -12,12 +12,12 @@ export const Preview = forwardRef<HTMLIFrameElement, PreviewProps>(function Prev
|
||||
const openUrl = `${pagePath}?skin=${encodeURIComponent(skin)}&source=${encodeURIComponent(source)}`;
|
||||
|
||||
return (
|
||||
<main className="flex-1 min-h-0 relative bg-zinc-50">
|
||||
<main className="flex-1 min-h-0 relative bg-zinc-50 dark:bg-zinc-900">
|
||||
<a
|
||||
href={openUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="absolute top-3 right-3 z-10 inline-flex items-center gap-1 h-7 rounded-md bg-clip-border ring ring-zinc-800/10 bg-white px-2.5 text-xs font-medium text-zinc-600 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 hover:text-zinc-950"
|
||||
className="absolute top-3 right-3 z-10 inline-flex items-center gap-1 h-7 rounded-md bg-clip-border ring ring-zinc-800/10 dark:ring-white/10 bg-white dark:bg-zinc-800 px-2.5 text-xs font-medium text-zinc-600 dark:text-zinc-300 shadow-xs shadow-black/20 transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-950 dark:hover:text-zinc-50"
|
||||
title="Open in new tab"
|
||||
>
|
||||
Open
|
||||
|
||||
-1
@@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user