ā† Components/Media

VideoCard

videocard-1779394345519.tsx
'use client'
import { useState } from 'react'

export default function VideoCard({
  title = 'Getting Started with Empire UI',
  channel = 'Empire Dev',
  views = '124K',
  duration = '12:34',
  emoji = 'šŸŽ¬',
  thumbnail = 'linear-gradient(135deg,#1e1e2e,#6d28d9)',
}) {
  const [hovered, setHovered] = useState(false)
  return (
    <div style={{ maxWidth:'320px', borderRadius:'14px', overflow:'hidden', background:'#fff', boxShadow:'0 4px 20px rgba(0,0,0,0.08)' }}>
      <div
        onMouseEnter={()=>setHovered(true)}
        onMouseLeave={()=>setHovered(false)}
        style={{ position:'relative', height:'180px', background:thumbnail, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}
      >
        <div style={{ fontSize:'64px', filter:'drop-shadow(0 4px 8px rgba(0,0,0,0.3))' }}>{emoji}</div>
        <div style={{
          position:'absolute', inset:0, background:'rgba(0,0,0,' + (hovered?'0.4':'0.2') + ')',
          display:'flex', alignItems:'center', justifyContent:'center', transition:'background 0.2s',
        }}>
          <div style={{
            width:'52px', height:'52px', borderRadius:'50%', background:'rgba(255,255,255,0.9)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:'20px', transform:hovered?'scale(1.1)':'scale(1)', transition:'transform 0.2s',
          }}>ā–¶</div>
        </div>
        <div style={{ position:'absolute', bottom:'10px', right:'10px', background:'rgba(0,0,0,0.8)', color:'#fff', padding:'3px 8px', borderRadius:'5px', fontSize:'12px', fontWeight:700 }}>{duration}</div>
      </div>
      <div style={{ padding:'14px' }}>
        <h3 style={{ margin:'0 0 8px', fontSize:'15px', fontWeight:700, color:'#1e293b', lineHeight:1.4 }}>{title}</h3>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:'12px', color:'#94a3b8' }}>
          <span>{channel}</span>
          <span>{views} views</span>
        </div>
      </div>
    </div>
  )
}

Component info

CategoryMedia
Frameworkreact
TierFREE
Views0
Copies0

About

Video thumbnail card with play button overlay and metadata

More from Media

'use client'
import { useState, useEffect } from 'react'

const IMAGES = [
  { id: 1, src: null, color: 'linear-gradient(135deg, #C9A84C, #6366f1)', caption: 'GlowButton Component', w: 1, h: 2 },
  { id: 2, src: null, color: 'linear-gradient(135deg,
ImageGallery
Media
'use client';
import { useEffect, useRef, useState } from 'react';

export default function AudioVisualizer({ isPlaying = true }) {
  const bars = 32;
  const refs = useRef([]);
  const [playing, setPlaying] = useState(isPlaying);

  useEffect(() =>
AudioVisualizer
Media
'use client'
import { useState, useEffect } from 'react'

export default function AudioPlayer({
  title = 'Midnight Drive',
  artist = 'Synthwave Radio',
  emoji = 'šŸŽµ',
  duration = 217,
}) {
  const [playing, setPlaying] = useState(false)
  const [
AudioPlayer
Media
'use client'
import { useState, useRef } from 'react'

export default function ComparisonSlider() {
  const [pos, setPos] = useState(50)
  const ref = useRef(null)
  const dragging = useRef(false)
  const onMouseDown = () => { dragging.current = true
ComparisionSlider
Media