Components

'use client';

import { useState, useEffect } from 'react';

interface Suggestion {
  id: number;
  label: string;
}

const suggestions: Suggestion[] = [
  { id: 1, label: 'Apple' },
  { id: 2, label: 'Banana' },
  { id: 3, label: 'Cherry' },
  { id: 4, label: 'Date' },
  { id: 5, label: 'Elderberry' },
];

const AutocompleteInput = () => {
  const

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]>([]);
  const [uploading, setUploading] = useState(false);

  const handleDragOver = (e: React.Drag

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState<string[]>([
    'Apple',
    'Banana',
    'Cherry',
    'Date',
  

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minValue, setMinValue] = useState(defaultValue[0]);
  const [maxValue, setMaxValue] = useState(defaultValu

'use client';

import React, { useState } from 'react';

interface Color {
  hex: string;
}

interface Swatch {
  hex: string;
}

const ColorPicker = () => {
  const [color, setColor] = useState<Color>({ hex: '#C9A84C' });
  const [customColor, setCustomColor] = useState<string>('');
  const [showCopied, setShowCopied] = useState<boolean>(false);