Initial Commit

components/form/form-errors.tsx

@@ -0,0 +1,28 @@
+import { XCircle } from "lucide-react";
+
+interface FormErrorsProps {
+  id: string;
+  errors?: Record<string, string[] | undefined>;
+}
+
+export const FormErrors = ({ id, errors }: FormErrorsProps) => {
+  if (!errors) return null;
+
+  return (
+    <div
+      id={`${id}-error`}
+      aria-live="polite"
+      className="mt-2 text-xs text-rose-500"
+    >
+      {errors?.[id]?.map((error: string) => (
+        <div
+          key={error}
+          className="flex items-center font-medium p-2 border border-rose-500 bg-rose-500/10 rounded-sm"
+        >
+          <XCircle className="h-4 w-4 mr-2" />
+          {error}
+        </div>
+      ))}
+    </div>
+  );
+};

components/form/form-input.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useFormStatus } from "react-dom";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { FormErrors } from "./form-errors";
+
+interface FormInputProps {
+  id: string;
+  label?: string;
+  type?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  errors?: Record<string, string[] | undefined>;
+  className?: string;
+  defaultValue?: string;
+  onBlur?: () => void;
+}
+
+export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  (
+    {
+      id,
+      label,
+      type,
+      placeholder,
+      required,
+      disabled,
+      errors,
+      className,
+      defaultValue = "",
+      onBlur,
+    },
+    ref
+  ) => {
+    const { pending } = useFormStatus();
+
+    return (
+      <div className="space-y-2">
+        <div className="space-y-1">
+          {label ? (
+            <Label
+              htmlFor={id}
+              className="text-xs font-semibold text-neutral-700"
+            >
+              {label}
+            </Label>
+          ) : null}
+          <Input
+            onBlur={onBlur}
+            defaultValue={defaultValue}
+            ref={ref}
+            required={required}
+            name={id}
+            id={id}
+            placeholder={placeholder}
+            type={type}
+            disabled={pending ?? disabled}
+            className={cn("text-sm px-2 py-1 h-7", className)}
+            aria-describedby={`${id}-error`}
+          />
+        </div>
+        <FormErrors id={id} errors={errors} />
+      </div>
+    );
+  }
+);
+
+FormInput.displayName = "FormInput";

components/form/form-picker.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+
+import { useEffect, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { Check, Loader2 } from "lucide-react";
+
+import { unsplash } from "@/lib/unsplash";
+import { cn } from "@/lib/utils";
+import { defaultImages } from "@/constants/images";
+import { FormErrors } from "./form-errors";
+
+interface FormPickerProps {
+  id: string;
+  errors?: Record<string, string[] | undefined>;
+}
+
+export const FormPicker = ({ id, errors }: FormPickerProps) => {
+  const { pending } = useFormStatus();
+
+  const [images, setImages] =
+    useState<Array<Record<string, any>>>(defaultImages);
+  const [isLoading, setIsLoading] = useState(true);
+  const [selectedImageId, setSelectedImageId] = useState(null);
+
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const result = await unsplash.photos.getRandom({
+          collectionIds: ["317099"],
+          count: 9,
+        });
+
+        if (result?.response) {
+          const newImages = result.response as Array<Record<string, any>>;
+          setImages(newImages);
+        } else {
+          console.error("Failed to get images.");
+        }
+      } catch (error) {
+        console.log(error);
+        setImages(defaultImages);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchImages();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="p-6 flex items-center justify-center">
+        <Loader2 className="h-6 w-6 text-sky-700 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      <div className="grid grid-cols-3 gap-2 mb-2">
+        {images.map((image) => (
+          <div
+            key={image.id}
+            className={cn(
+              "cursor-pointer relative aspect-video group hover:opacity-75 transition bg-muted",
+              pending && "opacity-50 hover:opacity-50 cursor-auto"
+            )}
+            onClick={() => {
+              if (pending) return;
+              setSelectedImageId(image.id);
+            }}
+          >
+            <input
+              type="radio"
+              id={id}
+              name={id}
+              className="hidden"
+              checked={selectedImageId === image.id}
+              disabled={pending}
+              value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
+            />
+            <Image
+              src={image.urls.thumb}
+              alt="Unsplash image"
+              className="object-cover rounded-sm"
+              fill
+            />
+            {selectedImageId === image.id && (
+              <div className="absolute inset-y-0 h-full w-full bg-black/30 flex items-center justify-center">
+                <Check className="h-4 w-4 text-white" />
+              </div>
+            )}
+            <Link
+              href={image.links.html}
+              target="_blank"
+              className="opacity-0 group-hover:opacity-100 absolute bottom-0 w-full text-[10px] truncate text-white hover:underline p-1 bg-black/50"
+            >
+              {image.user.name}
+            </Link>
+          </div>
+        ))}
+      </div>
+      <FormErrors id="image" errors={errors} />
+    </div>
+  );
+};

components/form/form-popover.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { X } from "lucide-react";
+import { toast } from "sonner";
+import { ElementRef, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useAction } from "@/hooks/use-action";
+import { createBoard } from "@/actions/create-board";
+import { Button } from "@/components//ui/button";
+import { useProModal } from "@/hooks/use-pro-modal";
+
+import { FormInput } from "./form-input";
+import { FormSubmit } from "./form-submit";
+import { FormPicker } from "./form-picker";
+
+interface FormPopoverProps {
+  children: React.ReactNode;
+  side?: "left" | "right" | "top" | "bottom";
+  align?: "center" | "start" | "end";
+  sideOffset?: number;
+}
+
+export const FormPopover = ({
+  children,
+  side = "bottom",
+  align,
+  sideOffset = 0,
+}: FormPopoverProps) => {
+  const proModal = useProModal();
+  const router = useRouter();
+  const closeRef = useRef<ElementRef<"button">>(null);
+
+  const { execute, fieldErrors } = useAction(createBoard, {
+    onSuccess: (data) => {
+      toast.success("Board created");
+      closeRef.current?.click();
+      router.push(`/board/${data.id}`);
+    },
+    onError: (error) => {
+      toast.error(error);
+      proModal.onOpen();
+    },
+  });
+
+  const onSubmit = (formData: FormData) => {
+    const title = formData.get("title") as string;
+    const image = formData.get("image") as string;
+
+    execute({ title, image });
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent
+        align={align}
+        className="w-80 pt-3"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <div className="text-sm font-medium text-center text-neutral-600 pb-4">
+          Create board
+        </div>
+        <PopoverClose ref={closeRef} asChild>
+          <Button
+            className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
+            variant="ghost"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </PopoverClose>
+        <form action={onSubmit} className="space-y-4">
+          <div className="space-y-4">
+            <FormPicker id="image" errors={fieldErrors} />
+            <FormInput
+              id="title"
+              label="Board Title"
+              type="text"
+              errors={fieldErrors}
+            />
+          </div>
+          <FormSubmit className="w-full">Create</FormSubmit>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};

components/form/form-submit.tsx

@@ -0,0 +1,41 @@
+"Use client";
+
+import { useFormStatus } from "react-dom";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface FormSubmitProps {
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  variant?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link"
+    | "primary";
+}
+
+export const FormSubmit = ({
+  children,
+  disabled,
+  className,
+  variant = "primary",
+}: FormSubmitProps) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      disabled={pending || disabled}
+      type="submit"
+      variant={variant}
+      size="sm"
+      className={cn(className)}
+    >
+      {children}
+    </Button>
+  );
+};

components/form/form-textarea.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+import { KeyboardEventHandler, forwardRef } from "react";
+
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+import { FormErrors } from "./form-errors";
+
+interface FormTextareaProps {
+  id: string;
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  errors?: Record<string, string[] | undefined>;
+  className?: string;
+  onBlur?: () => void;
+  onClick?: () => void;
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+  defaultValue?: string;
+}
+
+export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
+  (
+    {
+      id,
+      label,
+      placeholder,
+      required,
+      disabled,
+      errors,
+      className,
+      onBlur,
+      onClick,
+      onKeyDown,
+      defaultValue,
+    },
+    ref
+  ) => {
+    const { pending } = useFormStatus();
+
+    return (
+      <div className="space-y-2 w-full">
+        <div className="space-y-1 w-full">
+          {label ? (
+            <Label
+              htmlFor={id}
+              className="text-xs font-semibold text-neutral-700"
+            >
+              {label}
+            </Label>
+          ) : null}
+          <Textarea
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+            onClick={onClick}
+            ref={ref}
+            required={required}
+            placeholder={placeholder}
+            name={id}
+            id={id}
+            disabled={pending || disabled}
+            className={cn(
+              "resize-none focus-visible:ring-0 focus-visible:ring-offset-0 ring-0 focus:ring-0 outline-none shadow-sm",
+              className
+            )}
+            aria-describedby={`${id}-error`}
+            defaultValue={defaultValue}
+          />
+        </div>
+        <FormErrors id={id} errors={errors} />
+      </div>
+    );
+  }
+);
+
+FormTextarea.displayName = "FormTextarea";