NEXT JS STARTER PACK

<div class="mx-auto max-w-sm bg-gray-100 mt-20">
  <div class="rounded-lg bg-slate-900 py-3 text-slate-100">
    <h2 class="text-center font-sans text-2xl md:text-3xl lg:text-4xl">Tailwind Card</h2>
  </div>
  <div class="bg-slate-00 text-balance p-5 font-sans text-base text-slate-900 md:text-lg">Tailwind is your savior for this problem, It utility-first CSS framework packed with classes like flex, grid, text-center, mt-10, etc that can be composed to build any design, directly in your markup. It's fast, flexible, and reliable — with zero-runtime.</div>
  <div class="rounded-lg bg-gray-800 py-5 text-center">
    <a href="https://tailwindcss.com/docs/installation" class="inline-block rounded-xl bg-gray-100 px-4 py-2 text-gray-900" target="_blank">Documentation</a>
  </div>
</div>

 <Card className="py-4 w-fit bg-gray-200 text-slate-900">
  <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
    <p className="text-tiny uppercase font-bold">Daily Mix</p>
    <small className="text-default-500">12 Tracks</small>
    <h4 className="font-bold text-large">Frontend Radio</h4>
  </CardHeader>
  <CardBody className="overflow-visible py-2">
    <Image
      alt="Card background"
      className="object-cover rounded-xl"
      src="https://nextui.org/images/hero-card-complete.jpeg"
      width={270}
    />
  </CardBody>
</Card>

"use client";
import React from "react";
import { FieldValues, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

// NEXT UI Components
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/modal";
import { Button } from "@nextui-org/button";

const schema = z.object({
  name: z.string().min(1, { message: "Name is required" }),
  age: z
    .number({
      invalid_type_error: "Age must be a number",
    })
    .positive({ message: "Age must be positive" })
    .gt(18, { message: "Age should be greater than 18" }),
});

const Form = () => {
  const {
    register,
    handleSubmit,
    reset,
    watch,
    formState: { errors, isSubmitSuccessful },
  } = useForm({
    mode: "all",
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FieldValues) => {
    console.log(data);
    if (isSubmitSuccessful) {
      onOpen();
    }
  };

  const name = watch("name");

  // NEXT UI MODAL STATES
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  return (
    <div className="grid justify-center">
      <form
        className="grid gap-y-4 p-10 rounded-xl border border-white"
        onSubmit={handleSubmit(onSubmit)}
      >
        <div>
          <h2 className="text-xl md:text-3xl font-sans font-bold text-center">USER</h2>
        </div>
        <div className="min-h-10 min-w-72">
          <input
            className="w-full px-4 py-2 border border-slate-700 rounded-lg"
            {...register("name")}
            placeholder="Name"
          />
          {errors.name?.message && <p className="text-red-500">{errors?.name?.message as string}</p>}
        </div>
        <div className="mb-6">
          <input
            className="w-full px-4 py-2 border border-slate-700 rounded-lg"
            type="number"
            placeholder="Age"
            {...register("age", { valueAsNumber: true })}
          />
          {errors.age?.message && <p className="text-red-500">{errors?.age?.message as string}</p>}
        </div>
        <input
          className="px-4 py-2 bg-blue-500 text-white w-fit rounded-lg cursor-pointer"
          type="submit"
        />
      </form>

      {/* NEXT UI MODAL */}
      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        hideCloseButton
      >
        <ModalContent className="font-sans">
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">Hey {name}</ModalHeader>
              <ModalBody>
                <h2 className="text-2xl font-bold">Thank you for filling out the form</h2>
              </ModalBody>
              <ModalFooter>
                <Button
                  color="danger"
                  variant="solid"
                  onPress={() => {
                    onClose();
                    reset(); // Form reset
                  }}
                >
                  Close
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
};

export default Form;

// store.ts
import { create } from "zustand";
import { persist, createJSONStorage } from "zustand/middleware";

// Define the state and action types
interface State {
  loggedIn: boolean;
  setLoggedIn: (loggedIn: boolean) => void;
}

// Create the Zustand store with type definitions and persistence
export const useStore = create<State>()(
  persist(
    (set) => ({
      loggedIn: false, // use false for boolean
      setLoggedIn: (loggedIn: boolean) => set({ loggedIn }),
    }),
    {
      name: "food-storage", // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
    },
  ),
);

// App.tsx
"use client";
import { useStore } from "@/store/useStore";
import React from "react";

const Zustand = () => {
  const loggedIn = useStore((state) => state.loggedIn);
  const setLoggedIn = useStore((state) => state.setLoggedIn);

  return (
    <div className="bg-gray-900 text-white min-h-[calc(100vh-64px)] p-8">
      <section className="flex flex-col items-center gap-10">
        <div className="flex items-center gap-6">
          <h3>User - {loggedIn ? "Logged In" : "Logged Out"}</h3>
          <button
            className={`px-4 py-2 inline-block rounded-lg text-white ${loggedIn ? "bg-red-500" : "bg-green-500"}`}
            onClick={() => setLoggedIn(!loggedIn)}
          >
            {loggedIn ? "Logout" : "Login"}
          </button>
        </div>
        <p className="text-lg font-sans mb-4">Login and refresh the page, the state will persist</p>
      </section>
    </div>
  );
};

export default Zustand;