chore(root): archive examples into tech-preview (#315)

2026-08-16 02:45:09 +00:00 · 2026-01-20 14:35:51 +11:00
parent 78695d4bb6
commit 35c6cb1e16
62 changed files with 33 additions and 1519 deletions
@@ -0,0 +1,26 @@
+@import 'tailwindcss';
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,24 @@
+import { FrostedSkin, HlsVideo, MinimalSkin, VideoProvider } from '@videojs/react-preview';
+import '@videojs/react-preview/skins/frosted.css';
+import '@videojs/react-preview/skins/minimal.css';
+
+export default function Home() {
+  return (
+    <main className="p-4">
+      <h1 className="text-4xl font-extrabold py-2">Frosted Skin</h1>
+      <VideoProvider>
+        <FrostedSkin>
+          {/* @ts-expect-error -- types are incorrect */}
+          <HlsVideo src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
+        </FrostedSkin>
+      </VideoProvider>
+      <h1 className="text-4xl font-extrabold py-2">Minimal Skin</h1>
+      <VideoProvider>
+        <MinimalSkin>
+          {/* @ts-expect-error -- types are incorrect */}
+          <HlsVideo src="https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8" playsInline />
+        </MinimalSkin>
+      </VideoProvider>
+    </main>
+  );
+}