export const title = "Image picker components"
export const description = "Powerful and customizable React image picker components built for modern applications and websites. These image pickers are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/image-picker/image-picker.demo.tsx";

<PreviewAndCode title="Image picker example" isPublic={false}>
    <ResizablePreview id="preview" className="flex py-32 px-4 md:px-8 min-h-[320px] items-center justify-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ImagePickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="image-picker/ImagePickerDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this image picker component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add image-picker
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/image-picker" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the image picker components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Image picker examples

Below are examples and variations of this image picker component:

### Image picker {{ tocOnly:true }}

<PreviewAndCode title="Image picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 items-center justify-center py-32 px-4 md:px-8 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.ImagePickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="image-picker/ImagePickerDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What image adjustments are available?",
            answer: "The image picker provides 7 adjustment sliders: exposure, contrast, saturation, temperature, tint, highlights, and shadows. Each slider ranges from -100 to 100, with 0 as the default neutral value.",
        },
        {
            question: "What fill modes are supported?",
            answer: "The image picker supports four fill modes: `\"fill\"` (stretches to fill), `\"fit\"` (scales to fit within bounds), `\"crop\"` (fills and crops overflow), and `\"tile\"` (repeats the image in a tile pattern).",
        },
        {
            question: "How do I handle image uploads?",
            answer: "The image picker supports both click-to-upload and drag-and-drop file selection. Use the `onImageChange` callback on `ImagePicker.Provider` to receive the selected `File` object when a user uploads an image.",
        },
        {
            question: "Can I rotate the image?",
            answer: "Yes, the image picker includes a rotation button that rotates the image 90 degrees clockwise on each click. The rotation is applied in real-time to the canvas preview.",
        },
        {
            question: "Can I use the image picker sub-components independently?",
            answer: "Yes, the image picker uses a compound component pattern. You can use `ImagePicker.FillModeSelect` and `ImagePicker.AdjustmentSliders` independently within an `ImagePicker.Provider` wrapper to build custom layouts.",
        },
    ]}
/>