> ## Documentation Index > Fetch the complete documentation index at: https://docs.mixus.ai/llms.txt > Use this file to discover all available pages before exploring further. # Getting Started Videos > Video tutorials for new mixus users export const VideoGallery = ({category = 'All'}) => { const [videos, setVideos] = React.useState([]); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [selectedVideo, setSelectedVideo] = React.useState(null); React.useEffect(() => { async function fetchVideos() { try { setLoading(true); const response = await fetch('https://app.mixus.ai/api/docs/youtube-videos'); if (!response.ok) { throw new Error(`Failed to fetch videos: ${response.status}`); } const data = await response.json(); if (data.success && data.data) { let filteredVideos = data.data; if (category && category !== 'All') { filteredVideos = data.data.filter(video => video.category === category); } setVideos(filteredVideos); } else { throw new Error(data.error || 'Failed to fetch videos'); } } catch (err) { console.error('Error fetching videos:', err); setError(err.message); } finally { setLoading(false); } } fetchVideos(); }, [category]); if (loading) { return

{[...Array(6)].map((_, i) =>

)}

; } if (error) { return

Error loading videos: {error}

Please try refreshing the page or contact support if the issue persists.

; } if (videos.length === 0) { return

No videos found in this category.

; } return

{}

{videos.map(video =>

setSelectedVideo(video)}> {}

{}

{} {video.duration &&

{video.duration}

}

{}

{video.title}

{video.viewCount && {parseInt(video.viewCount).toLocaleString()} views } {video.publishedAt && {new Date(video.publishedAt).toLocaleDateString()} }

)}

{} {selectedVideo &&

setSelectedVideo(null)}>

e.stopPropagation()}> {} {}