refactor: structure YMB as enterprise React app

src/pages/WatchPage.jsx

@@ -0,0 +1,7 @@
+// Author: fruit.com.cn
+import { useParams } from 'react-router-dom';
+import { videos } from '../data/catalog';
+import { MediaCard } from '../components/MediaCard';
+import { useAppStore } from '../app/store';
+
+export function WatchPage() { const { id } = useParams(); const { locale } = useAppStore(); const video = videos.find((item) => item.id === id) || videos[0]; return <div className="watch-layout"><div><div className="player"><img src={`/assets/${video.image}`} alt={video.title} /><button>▶</button></div><h1 className="watch-title">{video.title}</h1><p className="watch-subtitle">{video.channel} · {video.views}</p></div><aside className="up-next"><h2>{locale.picks}</h2>{videos.slice(0, 4).map((item) => <MediaCard key={item.id} video={item} />)}</aside></div>; }