Avatar Image Slot

1"use client";
2 
3import { ImagePlus } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6import { useDropzone } from "@/components/ui/dropzone";
7import { FileThumbnail } from "@/components/ui/file-thumbnail";
8 
9import {
10  RejectionRows,
11  type DropzoneExampleProps,
12} from "./dropzone-example-shared";
13 
14export function AvatarImageSlot({ className }: DropzoneExampleProps) {
15  const dropzone = useDropzone({
16    accept: "image/*,.png,.jpg,.jpeg,.webp",
17    maxFiles: 1,
18  });
19  const selectedFile = dropzone.files[0];
20 
21  return (
22    <section
23      {...dropzone.getRootProps({
24        className: cn(
25          "rounded-lg border bg-muted/20 p-4 transition-colors",
26          dropzone.isDragging && "border-foreground/40 bg-accent/35",
27          className,
28        ),
29      })}
30    >
31      <input {...dropzone.getInputProps({ className: "hidden" })} />
32      <div className="flex items-center justify-between gap-3">
33        <div>
34          <div className="flex items-center gap-2 text-sm font-medium">
35            <ImagePlus className="text-muted-foreground size-4" aria-hidden />
36            Avatar image slot
37          </div>
38          <div className="text-muted-foreground mt-1 text-xs">
39            One image, replaceable by design.
40          </div>
41        </div>
42        {selectedFile ? (
43          <button
44            className="bg-background hover:bg-muted h-8 rounded-md border px-3 text-xs font-medium"
45            onClick={dropzone.clearFiles}
46            type="button"
47          >
48            Remove
49          </button>
50        ) : null}
51      </div>
52      <div
53        {...dropzone.getTriggerProps({
54          className:
55            "mt-4 grid min-h-44 cursor-pointer place-items-center rounded-md border border-dashed bg-background p-4 text-center outline-none transition-colors hover:bg-muted/40 focus-visible:ring-[3px] focus-visible:ring-ring/24",
56        })}
57      >
58        {selectedFile ? (
59          <div className="min-w-0">
60            <FileThumbnail
61              file={selectedFile.file}
62              previewAspectRatio={1}
63              className="mx-auto size-24 rounded-full"
64            />
65            <div className="mt-3 line-clamp-1 max-w-48 text-sm font-medium">
66              {selectedFile.file.name}
67            </div>
68            <div className="text-muted-foreground text-xs">
69              Click or drop to replace.
70            </div>
71          </div>
72        ) : (
73          <div>
74            <ImagePlus className="text-muted-foreground mx-auto size-8" />
75// … truncated