45 |
104 | )
105 | }
106 |
--------------------------------------------------------------------------------
/src/components/VideoGridItem.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react"
2 | import { formatDuration } from "../utils/formatDuration"
3 | import { formatTimeAgo } from "../utils/formatTimeAgo"
4 |
5 | type VideoGridItemProps = {
6 | id: string
7 | title: string
8 | channel: {
9 | id: string
10 | name: string
11 | profileUrl: string
12 | }
13 | views: number
14 | postedAt: Date
15 | duration: number
16 | thumbnailUrl: string
17 | videoUrl: string
18 | }
19 |
20 | const VIEW_FORMATTER = new Intl.NumberFormat(undefined, { notation: "compact" })
21 |
22 | export function VideoGridItem({
23 | id,
24 | title,
25 | channel,
26 | views,
27 | postedAt,
28 | duration,
29 | thumbnailUrl,
30 | videoUrl,
31 | }: VideoGridItemProps) {
32 | const [isVideoPlaying, setIsVideoPlaying] = useState(false)
33 | const videoRef = useRef
49 | {categories.map(category => (
50 |
58 | ))}
59 |
60 | {isLeftVisible && (
61 |
62 |
76 |
77 | )}
78 | {isRightVisible && (
79 |
80 |
101 |
102 | )}
103 | setIsVideoPlaying(true)}
50 | onMouseLeave={() => setIsVideoPlaying(false)}
51 | >
52 |
53 | 
59 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/contexts/SidebarContext.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ReactNode,
3 | createContext,
4 | useContext,
5 | useEffect,
6 | useState,
7 | } from "react"
8 |
9 | type SidebarProviderProps = {
10 | children: ReactNode
11 | }
12 |
13 | type SidebarContextType = {
14 | isLargeOpen: boolean
15 | isSmallOpen: boolean
16 | toggle: () => void
17 | close: () => void
18 | }
19 |
20 | const SidebarContext = createContext
60 | {formatDuration(duration)}
61 |
62 |
71 |
72 |
73 |
74 | 
75 |
76 |
88 |
77 |
78 | {title}
79 |
80 |
81 | {channel.name}
82 |
83 |
87 |
84 | {VIEW_FORMATTER.format(views)} Views • {formatTimeAgo(postedAt)}
85 |
86 |
12 |
70 | )
71 | }
72 |
73 | type PageHeaderFirstSectionProps = {
74 | hidden?: boolean
75 | }
76 |
77 | export function PageHeaderFirstSection({
78 | hidden = false,
79 | }: PageHeaderFirstSectionProps) {
80 | const { toggle } = useSidebarContext()
81 |
82 | return (
83 |
48 |
56 |
59 |
62 |
65 |
68 |
69 |
88 |
91 |
92 | 
93 |
94 |
95 | )
96 | }
97 |
--------------------------------------------------------------------------------
/src/layouts/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ChevronDown,
3 | ChevronUp,
4 | Clapperboard,
5 | Clock,
6 | Home,
7 | Library,
8 | PlaySquare,
9 | Repeat,
10 | History,
11 | ListVideo,
12 | Flame,
13 | ShoppingBag,
14 | Music2,
15 | Film,
16 | Radio,
17 | Gamepad2,
18 | Newspaper,
19 | Trophy,
20 | Lightbulb,
21 | Shirt,
22 | Podcast,
23 | } from "lucide-react"
24 | import { Children, ElementType, ReactNode, useState } from "react"
25 | import { Button, buttonStyles } from "../components/Button"
26 | import { twMerge } from "tailwind-merge"
27 | import { playlists, subscriptions } from "../data/sidebar"
28 | import { useSidebarContext } from "../contexts/SidebarContext"
29 | import { PageHeaderFirstSection } from "./PageHeader"
30 |
31 | export function Sidebar() {
32 | const { isLargeOpen, isSmallOpen, close } = useSidebarContext()
33 |
34 | return (
35 | <>
36 |
50 | {isSmallOpen && (
51 |
55 | )}
56 |
161 |
162 | )
163 | }
164 |
165 | type SmallSidebarItemProps = {
166 | Icon: ElementType
167 | title: string
168 | url: string
169 | }
170 |
171 | function SmallSidebarItem({ Icon, title, url }: SmallSidebarItemProps) {
172 | return (
173 |
180 | {title}
182 |
183 | )
184 | }
185 |
186 | type LargeSidebarSectionProps = {
187 | children: ReactNode
188 | title?: string
189 | visibleItemCount?: number
190 | }
191 |
192 | function LargeSidebarSection({
193 | children,
194 | title,
195 | visibleItemCount = Number.POSITIVE_INFINITY,
196 | }: LargeSidebarSectionProps) {
197 | const [isExpanded, setIsExpanded] = useState(false)
198 | const childrenArray = Children.toArray(children).flat()
199 | const showExpandButton = childrenArray.length > visibleItemCount
200 | const visibleChildren = isExpanded
201 | ? childrenArray
202 | : childrenArray.slice(0, visibleItemCount)
203 | const ButtonIcon = isExpanded ? ChevronUp : ChevronDown
204 |
205 | return (
206 |
207 | {title &&
220 | )
221 | }
222 |
223 | type LargeSidebarItemProps = {
224 | IconOrImgUrl: ElementType | string
225 | title: string
226 | url: string
227 | isActive?: boolean
228 | }
229 |
230 | function LargeSidebarItem({
231 | IconOrImgUrl,
232 | title,
233 | url,
234 | isActive = false,
235 | }: LargeSidebarItemProps) {
236 | return (
237 |
246 | {typeof IconOrImgUrl === "string" ? (
247 | {title}
}
208 | {visibleChildren}
209 | {showExpandButton && (
210 |
218 | )}
219 | 
248 | ) : (
249 |
252 | {title}
253 |
254 |
255 | )
256 | }
257 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactDOM from "react-dom/client"
3 | import App from "./App.tsx"
4 | import "./index.css"
5 |
6 | ReactDOM.createRoot(document.getElementById("root")!).render(
7 |