"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
import {DropZone, Text} from "@/components/ui/aria-css-dropzone";
import {useState} from 'react';
import React from 'react';
function Example() {
let [content, setContent] = useState<string | React.ReactElement | null>(null);
return (
<DropZone
// Determine whether dragged content should be accepted.
getDropOperation={types => (
['text/plain', 'image/jpeg', 'image/png', 'image.gif'].some(t => types.has(t))
? 'copy'
: 'cancel'
)}
onDrop={async (event) => {
// Find the first accepted item.
let item = event.items.find(item => (
(item.kind === 'text' && item.types.has('text/plain')) ||
(item.kind === 'file' && item.type.startsWith('image/'))
));
if (item?.kind === 'text') {
let text = await item.getText('text/plain');
setContent(text);
} else if (item?.kind === 'file') {
let file = await item.getFile();
let url = URL.createObjectURL(file);
setContent(<img src={url} alt={item.name} style={{maxHeight: 100, maxWidth: '100%'}} />)
}
}}>
<Text slot="label">
{content || "Drop or paste text or images here"}
</Text>
</DropZone>
);
}
function SourceSpecimen(){return <Example/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="light" enableSystem={false}><div data-component-demo data-demo-theme="source" data-theme="light" className="light" style={{background:"var(--background-color, #fff)",color:"var(--text-color, #171717)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}
