← Components/Content

MoodBoard

moodboard-1779388706110.tsx
'use client';
import { useState } from 'react';

export default function MoodBoard() {
  const [tiles, setTiles] = useState([
    { id: 1, label: 'Bold', gradient: 'linear-gradient(135deg, #1a1a2e, #16213e)', emoji: '⚡', x: 0, y: 0 },
    { id: 2, label: 'Vibrant', gradient: 'linear-gradient(135deg, #C9A84C, #f59e0b)', emoji: '🔥', x: 170, y: 0 },
    { id: 3, label: 'Deep', gradient: 'linear-gradient(135deg, #4c1d95, #6366f1)', emoji: '🌌', x: 0, y: 120 },
    { id: 4, label: 'Fresh', gradient: 'linear-gradient(135deg, #064e3b, #4ade80)', emoji: '🌿', x: 170, y: 120 },
    { id: 5, label: 'Warm', gradient: 'linear-gradient(135deg, #7c2d12, #f97316)', emoji: '🌅', x: 0, y: 240 },
    { id: 6, label: 'Cool', gradient: 'linear-gradient(135deg, #0c4a6e, #22d3ee)', emoji: '❄️', x: 170, y: 240 },
  ]);
  const [dragging, setDragging] = useState(null);
  const [offset, setOffset] = useState({ x: 0, y: 0 });

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 16px 0', fontSize: '14px', fontWeight: 700 }}>Mood Board</h3>
      <div style={{ position: 'relative', width: '330px', height: '370px', background: 'rgba(255,255,255,0.02)', border: '1px dashed rgba(255,255,255,0.1)', borderRadius: '16px', overflow: 'hidden' }}
        onMouseMove={e => {
          if (dragging !== null) {
            const rect = e.currentTarget.getBoundingClientRect();
            setTiles(prev => prev.map(t => t.id === dragging ? { ...t, x: Math.max(0, Math.min(180, e.clientX - rect.left - offset.x)), y: Math.max(0, Math.min(250, e.clientY - rect.top - offset.y)) } : t));
          }
        }}
        onMouseUp={() => setDragging(null)}
      >
        {tiles.map(tile => (
          <div key={tile.id}
            onMouseDown={e => {
              e.preventDefault();
              const rect = e.currentTarget.getBoundingClientRect();
              setOffset({ x: e.clientX - rect.left, y: e.clientY - rect.top });
              setDragging(tile.id);
            }}
            style={{
              position: 'absolute', left: tile.x, top: tile.y,
              width: '140px', height: '100px',
              borderRadius: '12px',
              background: tile.gradient,
              border: '1px solid rgba(255,255,255,0.1)',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              cursor: dragging === tile.id ? 'grabbing' : 'grab',
              userSelect: 'none',
              zIndex: dragging === tile.id ? 10 : 1,
              boxShadow: dragging === tile.id ? '0 12px 36px rgba(0,0,0,0.5)' : '0 4px 12px rgba(0,0,0,0.3)',
              transition: dragging === tile.id ? 'none' : 'box-shadow 0.2s',
            }}
          >
            <span style={{ fontSize: '28px', marginBottom: '6px' }}>{tile.emoji}</span>
            <span style={{ color: 'rgba(255,255,255,0.8)', fontSize: '12px', fontWeight: 600 }}>{tile.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Component info

CategoryContent
Frameworkreact
TierFREE
Views0
Copies0

About

Draggable mood board with gradient tiles

More from Content

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

const ARTICLES = [
  { id: 1, title: 'Building a 100-Component UI Library in 2 Weeks with AI', excerpt: 'How we used Claude Code and Groq to generate 100+ production-ready React components in record time
ArticleCard
Content
'use client';
import { useState } from 'react';

export default function AccordionFAQ() {
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: 'How does the AI model work?', a: 'Our AI uses a fine-tuned large language model trained on mil
AccordionFAQ
Content