DragRankList

dragranklist-1779388705657.tsx

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

export default function DragRankList() {
  const [items, setItems] = useState([
    { id: 1, label: 'AI Code Review', score: 98 },
    { id: 2, label: 'Performance Audit', score: 87 },
    { id: 3, label: 'Security Scan', score: 75 },
    { id: 4, label: 'Dependency Check', score: 62 },
    { id: 5, label: 'Lint & Format', score: 54 },
  ]);
  const [dragging, setDragging] = useState(null);
  const [over, setOver] = useState(null);

  const handleDrop = () => {
    if (dragging === null || over === null || dragging === over) { setDragging(null); setOver(null); return; }
    const newItems = [...items];
    const [moved] = newItems.splice(dragging, 1);
    newItems.splice(over, 0, moved);
    setItems(newItems);
    setDragging(null);
    setOver(null);
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '400px' }}>
      <h3 style={{ color: '#F5F5F0', margin: '0 0 16px 0', fontSize: '16px' }}>Priority Queue</h3>
      {items.map((item, i) => (
        <div
          key={item.id}
          draggable
          onDragStart={() => setDragging(i)}
          onDragEnter={() => setOver(i)}
          onDragEnd={handleDrop}
          onDragOver={e => e.preventDefault()}
          style={{
            display: 'flex', alignItems: 'center', gap: '12px',
            background: over === i && dragging !== i ? 'rgba(201,168,76,0.08)' : 'rgba(255,255,255,0.03)',
            border: `1px solid ${over === i ? 'rgba(201,168,76,0.3)' : 'rgba(255,255,255,0.07)'}`,
            borderRadius: '12px', padding: '12px 16px', marginBottom: '8px',
            cursor: 'grab', transition: 'all 0.2s ease',
            opacity: dragging === i ? 0.4 : 1,
          }}
        >
          <span style={{ color: 'rgba(245,245,240,0.25)', fontSize: '16px' }}>⠿</span>
          <span style={{
            minWidth: '24px', height: '24px',
            borderRadius: '50%',
            background: 'rgba(201,168,76,0.15)',
            color: '#C9A84C', fontSize: '11px', fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{i + 1}</span>
          <span style={{ flex: 1, color: '#F5F5F0', fontSize: '14px' }}>{item.label}</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            <div style={{ width: '60px', height: '4px', borderRadius: '2px', background: 'rgba(255,255,255,0.08)', overflow: 'hidden' }}>
              <div style={{ height: '100%', width: `${item.score}%`, background: '#C9A84C', borderRadius: '2px' }} />
            </div>
            <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '12px', minWidth: '32px' }}>{item.score}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Reorderable ranked list with drag handles

More from Utility

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

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility

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

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

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

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

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

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility