ImageGallery

imagegallery-1779394026158.tsx

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

const IMAGES = [
  { id:1, emoji:'🌄', label:'Mountains', bg:'linear-gradient(135deg,#667eea,#764ba2)', h:180 },
  { id:2, emoji:'🌊', label:'Ocean', bg:'linear-gradient(135deg,#0891b2,#0e7490)', h:120 },
  { id:3, emoji:'🌸', label:'Spring', bg:'linear-gradient(135deg,#ec4899,#db2777)', h:150 },
  { id:4, emoji:'🌿', label:'Forest', bg:'linear-gradient(135deg,#10b981,#059669)', h:130 },
  { id:5, emoji:'🌆', label:'City', bg:'linear-gradient(135deg,#374151,#111827)', h:160 },
  { id:6, emoji:'🌅', label:'Sunset', bg:'linear-gradient(135deg,#f59e0b,#ef4444)', h:140 },
]

export default function ImageGallery({ images = IMAGES }) {
  const [selected, setSelected] = useState(null)
  return (
    <div>
      <div style={{ columns:'2 200px', gap:'10px' }}>
        {images.map(img => (
          <div key={img.id} onClick={() => setSelected(img)} style={{
            marginBottom:'10px', borderRadius:'12px', overflow:'hidden',
            height:img.h, background:img.bg, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:'48px', transition:'transform 0.2s',
            breakInside:'avoid',
          }}
            onMouseEnter={e => e.currentTarget.style.transform='scale(0.97)'}
            onMouseLeave={e => e.currentTarget.style.transform='scale(1)'}
          >{img.emoji}</div>
        ))}
      </div>
      {selected && (
        <div onClick={() => setSelected(null)} style={{
          position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', zIndex:100,
          display:'flex', alignItems:'center', justifyContent:'center',
          backdropFilter:'blur(8px)',
        }}>
          <div style={{
            width:'400px', height:'300px', borderRadius:'20px', background:selected.bg,
            display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
            fontSize:'80px', boxShadow:'0 25px 80px rgba(0,0,0,0.5)',
          }}>
            {selected.emoji}
            <div style={{ fontSize:'18px', color:'#fff', fontWeight:700, marginTop:'12px' }}>{selected.label}</div>
          </div>
        </div>
      )}
    </div>
  )
}

Component info

CategoryMedia

Frameworkreact

TierFREE

Copies0

About

Masonry-style image gallery with lightbox preview and navigation

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 } 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,#1e

VideoCard

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