reui-blocks/blocks/offer-modal5.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { X } from "lucide-react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Controller } from "react-hook-form";
import { z } from "zod";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { Field, FieldError } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

const OFFER_MODAL = {
  logo: {
    src: "/block-media/shadcnblocks/block/symbols/ux.svg",
    alt: "لوگو",
  },
  title: "همین حالا ثبت‌نام کنید و ۲۰٪ روی سالانه بگیرید",
  description:
    "به‌روزرسانی محصول و پیشنهاد پلن را دریافت کنید؛ لغو اشتراک هر زمان ممکن است.",
  image: {
    src: "/block-media/shadcnblocks/block/ecommerce/promotional/Cozy-Smartphone-Interaction-2.png",
    alt: "استفاده از اپ موبایل فروش",
  },
};

const formSchema = z.object({
  email: z.string().email("آدرس ایمیل نامعتبر است"),
});

type Image = {
  src: string;
  alt: string;
};

type FormType = z.infer<typeof formSchema>;

type OfferModalData = {
  logo: Image;
  image: Image;
  title: string;
  description: string;
};

type Offermodal5Props = OfferModalData;

const OfferModal5 = ({
  title = OFFER_MODAL.title,
  logo = OFFER_MODAL.logo,
  description = OFFER_MODAL.description,
  image = OFFER_MODAL.image,
}: Offermodal5Props) => {
  const [isOpen, setIsOpen] = useState(true);
  const form = useForm<FormType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  });

  function onSubmit(values: FormType) {
    console.log(values);
  }

  return (
    <div
      dir="rtl"
      lang="fa"
      className="relative flex min-h-[40rem] w-full items-center justify-center p-4 md:min-h-[48rem]"
    >
      {isOpen ? (
        <div
          role="dialog"
          aria-modal="true"
          aria-labelledby="offer-modal5-title"
          className={cn(
            "relative w-full max-w-150 overflow-hidden rounded-xl border bg-popover text-start text-popover-foreground shadow-lg",
          )}
        >
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            aria-label="بستن"
            className="absolute end-3 top-3 z-10"
            onClick={() => setIsOpen(false)}
          >
            <X className="size-5 transition-all" />
          </Button>
          <div className="max-h-full overflow-y-auto">
            <div className="space-y-4 p-6 md:p-16">
              <div className="basis-1/2 space-y-8">
                <div className="gap-8 space-y-8 p-0">
                  {logo && (
                    <img
                      src={logo.src}
                      alt={logo.alt}
                      className="size-11 lg:size-16 dark:invert"
                    />
                  )}
                  <div className="space-y-4">
                    <h2
                      id="offer-modal5-title"
                      className="text-start text-xl leading-tight font-medium md:text-3xl lg:text-xl"
                    >
                      {title}
                    </h2>
                    <p className="text-start text-xl leading-tight text-muted-foreground">
                      {description}
                    </p>
                  </div>
                </div>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                  <div className="flex items-start gap-3 max-sm:flex-col">
                    <Controller
                      control={form.control}
                      name="email"
                      render={({ field, fieldState }) => (
                        <Field
                          className="w-full flex-1"
                          data-invalid={fieldState.invalid}
                        >
                          <Input
                            type="email"
                            dir="rtl"
                            className="h-10 rounded-full px-6 text-start"
                            placeholder="ایمیل کاری"
                            {...field}
                            aria-invalid={fieldState.invalid}
                          />
                          {fieldState.invalid && (
                            <FieldError errors={[fieldState.error]} />
                          )}
                        </Field>
                      )}
                    />
                    <Button
                      type="submit"
                      size="lg"
                      className="rounded-full max-sm:w-full sm:basis-30"
                    >
                      ثبت‌نام و دریافت تخفیف
                    </Button>
                  </div>
                </form>
              </div>
              <p className="text-xs text-muted-foreground">
                با ثبت‌نام، با{" "}
                <a href="#" className="underline underline-offset-3">
                  شرایط خدمات
                </a>{" "}
                و{" "}
                <a href="#" className="underline underline-offset-3">
                  سیاست حریم خصوصی
                </a>{" "}
                ما موافقت می‌کنید.
              </p>
            </div>
            <div className="h-1/2 basis-1/2">
              <AspectRatio ratio={1} className="overflow-hidden">
                <img
                  src={image.src}
                  alt={image.alt}
                  className="block size-full object-cover object-center"
                />
              </AspectRatio>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
};

export { OfferModal5 };