203cb5d5e5
- DESIGN_TOKENS.md: Complete rewrite to document --sumi-* token system - APP_SHELL.md: Update layout shell docs (glass bg, backdrop-blur, z-index) - DESIGN_DIRECTION.md: Update aesthetic direction to SUMI philosophy - .storybook/preview.tsx: Remove deleted CSS imports, update bg colors - eslint.config.js: Update color rule message from Kodo to SUMI tokens - tailwind.config.ts: Fix comment referencing deleted design-tokens.css Co-authored-by: Cursor <cursoragent@cursor.com>
1 line
9.7 KiB
JavaScript
1 line
9.7 KiB
JavaScript
import{a as h,j as e}from"./vendor-react-Dkpvlwai.js";import{n as f,B as c,C as m,x as j,S as t,E as v}from"./index-jE2AGx2y.js";import{z as N,x as b,D as w,l as y,a7 as k,F as S,E as g,a2 as C,ak as E}from"./vendor-icons-CbmLcMl-.js";import{y as u}from"./vendor-CAoAb3tF.js";import"./vendor-router-4bycex72.js";import"./vendor-tanstack-BoI3DtL9.js";import"./vendor-utils-CDFfoeXY.js";const M={id:"1",title:"Late Night DnB Production 🎧 | Feedback Session",streamer:"Neuro_Glitch",viewers:1240,thumbnailUrl:"https://picsum.photos/id/140/800/450",tags:["Production","Ableton","DnB"],isLive:!0,category:"Production"},L=[{user:"BassHead99",text:"That Reese bass is filthy! 🤮🔥",color:"text-muted-foreground"},{user:"Studio_Rat",text:"What VST is that?",color:"text-muted-foreground"},{user:"Neuro_Glitch",text:"It's Phase Plant, just initializing now.",color:"text-warning font-bold"},{user:"VocalChops",text:"Sent a $5 dono! Check my track?",color:"text-success"}];function T(s={}){const{addToast:a}=f(),l=s.stream??M,n=s.chatMessages??L,[i,r]=h.useState(""),d=h.useCallback(()=>{i.trim()&&(s.onSendMessage?s.onSendMessage(i):a("Message sent to chat","success"),r(""))},[i,s.onSendMessage,a]);return{stream:l,chatMessages:n,msgInput:i,setMsgInput:r,handleSend:d,addToast:a,isLoading:s.isLoading??!1,error:s.error??null}}function D({stream:s,onToggleChat:a,onSettings:l,onFullscreen:n}){return e.jsxs("div",{className:"relative aspect-video bg-black rounded-xl overflow-hidden shadow-2xl border border-border group",children:[e.jsx("img",{src:s.thumbnailUrl,alt:"",className:"w-full h-full object-cover opacity-80"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"}),e.jsxs("div",{className:"absolute top-4 left-4 flex gap-2",children:[e.jsxs("span",{className:"bg-destructive text-destructive-foreground px-2 py-1 text-xs font-bold rounded flex items-center gap-1 animate-pulse",children:[e.jsx(N,{className:"w-3 h-3"})," LIVE"]}),e.jsxs("span",{className:"bg-black/50 backdrop-blur text-foreground px-2 py-1 text-xs font-mono rounded flex items-center gap-1",children:[e.jsx(b,{className:"w-3 h-3"})," ",s.viewers]})]}),e.jsxs("div",{className:"absolute bottom-0 left-0 right-0 p-4 flex justify-between items-end opacity-0 group-hover:opacity-100 transition-opacity duration-[var(--sumi-duration-normal)]",children:[e.jsxs("div",{className:"flex gap-4",children:[e.jsx(c,{variant:"ghost",size:"sm",className:"text-foreground hover:bg-white/10",onClick:a,children:e.jsx(w,{className:"w-5 h-5"})}),e.jsx(c,{variant:"ghost",size:"sm",className:"text-foreground hover:bg-white/10",onClick:l,children:e.jsx(y,{className:"w-5 h-5"})})]}),e.jsx("div",{className:"flex gap-4",children:e.jsx(c,{variant:"ghost",size:"sm",className:"text-foreground hover:bg-white/10",onClick:n,children:e.jsx(k,{className:"w-5 h-5"})})})]})]})}function R({stream:s,onStreamerClick:a,onFollow:l,onDonate:n,onShare:i}){return e.jsx(m,{variant:"glass",className:"p-6 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:e.jsxs("div",{className:"flex justify-between items-start",children:[e.jsxs("div",{className:"flex gap-4",children:[e.jsx("div",{className:"w-12 h-12 rounded-full bg-gradient-neon p-0.5",children:e.jsx("img",{src:"https://picsum.photos/100/100",alt:"",className:"w-full h-full rounded-full object-cover border-2 border-border"})}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-3xl font-bold text-foreground tracking-tight",children:s.title}),e.jsx("p",{className:"text-primary font-medium cursor-pointer hover:underline",onClick:a,children:s.streamer}),e.jsx("div",{className:"flex gap-2 mt-2",children:s.tags.map(r=>e.jsx(j,{label:r,variant:"terminal"},r))})]})]}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(c,{variant:"secondary",icon:e.jsx(S,{className:"w-4 h-4"}),onClick:l,children:"FOLLOW"}),e.jsx(c,{variant:"primary",icon:e.jsx(g,{className:"w-4 h-4"}),onClick:n,children:"DONATE"}),e.jsx(c,{variant:"ghost",icon:e.jsx(C,{className:"w-4 h-4"}),onClick:i,children:"SHARE"})]})]})})}function V({onChannelClick:s}){return e.jsxs("div",{className:"mt-4",children:[e.jsx("h3",{className:"font-bold text-muted-foreground mb-4 uppercase text-sm tracking-wider",children:"Recommended Channels"}),e.jsx(u.div,{className:"grid grid-cols-1 md:grid-cols-3 gap-4",initial:"hidden",animate:"visible",variants:{visible:{transition:{staggerChildren:.06}},hidden:{}},children:[1,2,3].map(a=>e.jsx(u.div,{variants:{hidden:{opacity:0,y:8},visible:{opacity:1,y:0}},children:e.jsxs(m,{variant:"glass",className:"p-0 overflow-hidden group cursor-pointer border-white/5 bg-black/20 backdrop-blur-xl transition-all duration-[var(--sumi-duration-normal)]",onClick:()=>s?.(a),children:[e.jsxs("div",{className:"aspect-video relative",children:[e.jsx("img",{src:`https://picsum.photos/300/200?random=${a}`,alt:"",className:"w-full h-full object-cover"}),e.jsx("div",{className:"absolute bottom-2 left-2 bg-background/80 px-2 py-0.5 rounded text-xs text-foreground",children:"DJ Set"})]}),e.jsxs("div",{className:"p-4 flex gap-2",children:[e.jsx("div",{className:"w-8 h-8 rounded-full bg-muted"}),e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-sm text-foreground truncate tracking-tight",children:"Techno Bunker 24/7"}),e.jsx("div",{className:"text-xs text-muted-foreground",children:"Underground_Radio"})]})]})]})},a))})]})}function A({messages:s,msgInput:a,onMsgInputChange:l,onSend:n,onWalletClick:i}){return e.jsxs(m,{variant:"glass",className:"lg:col-span-3 flex flex-col p-0 overflow-hidden h-full min-h-0 border-white/5 bg-black/20 backdrop-blur-xl transition-shadow duration-[var(--sumi-duration-normal)]",children:[e.jsxs("div",{className:"p-4 border-b border-border flex justify-between items-center bg-card",children:[e.jsx("span",{className:"font-mono text-sm font-bold text-foreground tracking-tight",children:"STREAM CHAT"}),e.jsx("div",{className:"w-2 h-2 bg-success rounded-full animate-pulse"})]}),e.jsxs("div",{className:"flex-1 overflow-y-auto p-4 space-y-4 font-mono text-sm",children:[s.map((r,d)=>e.jsxs("div",{className:"break-words",children:[e.jsxs("span",{className:`font-bold ${r.color} mr-2 cursor-pointer hover:underline`,children:[r.user,":"]}),e.jsx("span",{className:"text-foreground",children:r.text})]},d)),e.jsx("div",{className:"text-center py-2",children:e.jsx("span",{className:"text-xs text-muted-foreground bg-muted px-2 py-1 rounded-full",children:"Welcome to the chat room!"})})]}),e.jsxs("div",{className:"p-4 bg-muted border-t border-border",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsxs("div",{className:"relative flex-1",children:[e.jsx("input",{value:a,onChange:r=>l(r.target.value),onKeyDown:r=>r.key==="Enter"&&n(),className:"w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--sumi-duration-normal)]",placeholder:"Say something..."}),e.jsx(g,{className:"absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-warning cursor-pointer hover:opacity-80 transition-opacity"})]}),e.jsx(c,{variant:"primary",size:"sm",className:"px-4",onClick:n,children:e.jsx(E,{className:"w-4 h-4"})})]}),e.jsxs("div",{className:"flex justify-between mt-2 px-1",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Balance: 420 $VEZA"}),e.jsx("span",{className:"text-xs text-muted-foreground cursor-pointer hover:text-foreground",onClick:i,children:"Get Coins"})]})]})]})}function I(){return e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 min-h-layout-main animate-fadeIn",children:[e.jsxs("div",{className:"lg:col-span-9 flex flex-col gap-4",children:[e.jsx(t,{className:"aspect-video w-full rounded-xl"}),e.jsxs("div",{className:"flex justify-between items-start gap-4",children:[e.jsxs("div",{className:"flex gap-4",children:[e.jsx(t,{className:"w-12 h-12 rounded-full shrink-0"}),e.jsxs("div",{className:"space-y-2 min-w-0",children:[e.jsx(t,{className:"h-8 w-3/4"}),e.jsx(t,{className:"h-4 w-32"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(t,{className:"h-5 w-16"}),e.jsx(t,{className:"h-5 w-20"}),e.jsx(t,{className:"h-5 w-14"})]})]})]}),e.jsxs("div",{className:"flex gap-2 shrink-0",children:[e.jsx(t,{className:"h-10 w-24"}),e.jsx(t,{className:"h-10 w-24"}),e.jsx(t,{className:"h-10 w-20"})]})]}),e.jsxs("div",{className:"mt-4",children:[e.jsx(t,{className:"h-4 w-48 mb-4"}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[1,2,3].map(s=>e.jsx(t,{className:"aspect-video w-full rounded-xl"},s))})]})]}),e.jsxs("div",{className:"lg:col-span-3 flex flex-col min-h-0",children:[e.jsx(t,{className:"h-12 rounded-t-xl mb-4"}),e.jsx("div",{className:"flex-1 space-y-4",children:[1,2,3,4,5].map(s=>e.jsx(t,{className:"h-8 w-full"},s))}),e.jsx(t,{className:"h-24 rounded-b-xl mt-4"})]})]})}function U({stream:s,chatMessages:a}={}){const{stream:l,chatMessages:n,msgInput:i,setMsgInput:r,handleSend:d,addToast:o,isLoading:p,error:x}=T({stream:s??void 0,chatMessages:a});return p?e.jsx(I,{}):x?e.jsx("div",{className:"min-h-layout-main flex items-center justify-center p-6",children:e.jsx(v,{error:x,variant:"card"})}):e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-8 min-h-layout-main animate-fadeIn",children:[e.jsxs("div",{className:"lg:col-span-9 flex flex-col gap-4",children:[e.jsx(D,{stream:l,onToggleChat:()=>o("Chat hidden"),onSettings:()=>o("Stream Settings"),onFullscreen:()=>o("Entering Fullscreen")}),e.jsx(R,{stream:l,onStreamerClick:()=>o("Opening Streamer Profile"),onFollow:()=>o("Followed Streamer","success"),onDonate:()=>o("Donation modal opening...","info"),onShare:()=>o("Stream link copied!")}),e.jsx(V,{onChannelClick:()=>o("Switching stream...")})]}),e.jsx(A,{messages:n,msgInput:i,onMsgInputChange:r,onSend:d,onWalletClick:()=>o("Opening Wallet...")})]})}export{U as LiveView};
|