nextuiq/dist/index24.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { Card } from './index9.mjs';
import { useDropzone } from 'react-dropzone';
import { FiUploadCloud } from './index47.mjs';

const DropzoneComponent = ({ onFileUpload }) => {
  const onDrop = (acceptedFiles) => {
    onFileUpload?.(acceptedFiles);
  };
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      "image/png": [],
      "image/jpeg": [],
      "image/webp": [],
      "image/svg+xml": []
    }
  });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { className: "p-6", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "mb-6 text-lg font-semibold text-[oklch(var(--theme-foreground))]", children: "Dropzone" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "transition border border-[oklch(var(--theme-border))] border-dashed cursor-pointer hover:border-[oklch(var(--theme-primary))] rounded-xl", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "form",
      {
        ...getRootProps(),
        className: `dropzone rounded-xl border-dashed p-7 lg:p-10 ${isDragActive ? "border-[oklch(var(--theme-primary))] bg-[oklch(var(--theme-muted))]" : "border-[oklch(var(--theme-border))] bg-[oklch(var(--theme-muted))]"}`,
        id: "demo-upload",
        "aria-label": "File upload area",
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("input", { ...getInputProps(), "aria-label": "File input" }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center m-0", children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-[22px] flex justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-[68px] w-[68px] items-center justify-center rounded-full \r\n                bg-[oklch(var(--theme-muted))] text-[oklch(var(--theme-muted-foreground))]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiUploadCloud, { size: 29 }) }) }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "mb-3 font-semibold text-[oklch(var(--theme-foreground))]", children: isDragActive ? "Drop Files Here" : "Drag & Drop Files Here" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-center mb-5 block w-full max-w-[290px] text-sm text-[oklch(var(--theme-muted-foreground))]", children: "Drag and drop your PNG, JPG, WebP, SVG images here or browse" }),
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium underline text-theme-sm text-[oklch(var(--theme-primary))]", children: "Browse File" })
          ] })
        ]
      }
    ) })
  ] });
};
DropzoneComponent.displayName = "Dropzone";
const Dropzone = DropzoneComponent;

export { Dropzone };