pros-left-sidebar.tsx

"use client";

import { useEffect, useState } from "react";
import { RadioGroup } from "@headlessui/react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";

const plans = [
  {
    name: "Start from scratch",
    description: "Build your own custom sequence",
    icon: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="35"
        height="35"
        viewBox="0 0 35 35"
        fill="none"
      >
        <circle
          cx="17.5"
          cy="17.5"
          r="15.1"
          fill="#C5FBDC"
          stroke="#E9FEF3"
          strokeWidth={3.2}
        />
        <path
          d="M12 19.1818L19.6364 11L18 17H24L16.3636 25.1818L18 19.1818H12Z"
          stroke="#008F3A"
          strokeWidth={1.09091}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  {
    name: "Cold outreach on LinkedIn",
    description: "Perfect to get started with AI-powered outreach on LinkedIn",
    icon: (
      <svg
        width="35"
        height="35"
        viewBox="0 0 35 35"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="17.5"
          cy="17.5"
          r="15.1"
          fill="#DEEAFF"
          stroke="#EDF4FF"
          strokeWidth={3.2}
        />
        <path
          d="M15.9231 16.1538C15.9231 16.2151 15.8988 16.2737 15.8555 16.317C15.8122 16.3603 15.7535 16.3846 15.6923 16.3846C15.6311 16.3846 15.5724 16.3603 15.5291 16.317C15.4859 16.2737 15.4615 16.2151 15.4615 16.1538C15.4615 16.0926 15.4859 16.0339 15.5291 15.9907C15.5724 15.9474 15.6311 15.9231 15.6923 15.9231C15.7535 15.9231 15.8122 15.9474 15.8555 15.9907C15.8988 16.0339 15.9231 16.0926 15.9231 16.1538ZM15.9231 16.1538H15.6923M18.2308 16.1538C18.2308 16.2151 18.2065 16.2737 18.1632 16.317C18.1199 16.3603 18.0612 16.3846 18 16.3846C17.9388 16.3846 17.8801 16.3603 17.8368 16.317C17.7935 16.2737 17.7692 16.2151 17.7692 16.1538C17.7692 16.0926 17.7935 16.0339 17.8368 15.9907C17.8801 15.9474 17.9388 15.9231 18 15.9231C18.0612 15.9231 18.1199 15.9474 18.1632 15.9907C18.2065 16.0339 18.2308 16.0926 18.2308 16.1538ZM18.2308 16.1538H18M20.5385 16.1538C20.5385 16.2151 20.5141 16.2737 20.4709 16.317C20.4276 16.3603 20.3689 16.3846 20.3077 16.3846C20.2465 16.3846 20.1878 16.3603 20.1445 16.317C20.1012 16.2737 20.0769 16.2151 20.0769 16.1538C20.0769 16.0926 20.1012 16.0339 20.1445 15.9907C20.1878 15.9474 20.2465 15.9231 20.3077 15.9231C20.3689 15.9231 20.4276 15.9474 20.4709 15.9907C20.5141 16.0339 20.5385 16.0926 20.5385 16.1538ZM20.5385 16.1538H20.3077M12 18.0062C12 18.9908 12.6911 19.8486 13.6658 19.992C14.3348 20.0905 15.0105 20.1662 15.6923 20.2191V23.0769L18.2671 20.5028C18.3946 20.3758 18.566 20.3026 18.7458 20.2985C19.9468 20.2689 21.1449 20.1666 22.3335 19.992C23.3089 19.8486 24 18.9914 24 18.0055V14.3022C24 13.3163 23.3089 12.4591 22.3342 12.3157C20.8991 12.1051 19.4505 11.9995 18 12C16.528 12 15.0806 12.1077 13.6658 12.3157C12.6911 12.4591 12 13.3169 12 14.3022V18.0062Z"
          stroke="#001AFF"
          strokeWidth={0.92}
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
];

const LeftSideBar = () => {
  const query = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const plan = query.get("init");
  const [selected, setSelected] = useState(plans[0]);

  useEffect(() => {
    if (plan === "linkedIn") {
      setSelected(plans[1]);
    } else {
      setSelected(plans[0]);
    }
  }, [plan]);

  useEffect(() => {
    const query = selected === plans[0] ? "?init=scratch" : "?init=linkedIn";

    router.push(`${query}`);
  }, [selected, pathname]);

  return (
    <div className="bg-white py-16 px-10 w-full max-w-2xl">
      <div className="w-full">
        <RadioGroup value={selected} onChange={setSelected}>
          <div className="divide-y">
            {plans.map((plan) => (
              <div className="py-5" key={plan.name}>
                <RadioGroup.Option
                  value={plan}
                  className={({ active, checked }) =>
                    `
              ${
                checked
                  ? "bg-[#FCFAFF] text-[#6039DB] ring-4 ring-white/60 ring-offset-4 ring-offset-[#DFC3FF]"
                  : "bg-white"
              }
                relative flex cursor-pointer rounded-lg px-5 py-4 border-2 border-gray-100 focus:outline-none`
                  }
                >
                  {({ active, checked }) => (
                    <>
                      <div className="flex w-full items-center justify-between">
                        <div className="flex items-center">
                          <div className="flex gap-3">
                            {plan.icon}
                            <div className="text-sm">
                              <RadioGroup.Label
                                as="p"
                                className={`font-semibold text-sm mb-2 ${
                                  checked ? "text-[#6039DB]" : "text-gray-900"
                                }`}
                              >
                                {plan.name}
                              </RadioGroup.Label>
                              <RadioGroup.Description
                                as="span"
                                className={`inline font-normal text-xs ${
                                  checked ? "text-[#6039DB]" : "text-gray-500"
                                }`}
                              >
                                {plan.description}
                              </RadioGroup.Description>
                            </div>
                          </div>
                        </div>
                        {checked ? (
                          <div className="shrink-0 text-[#6039DB]">
                            <CheckIcon className="h-6 w-6" />
                          </div>
                        ) : (
                          <div className="shrink-0 text-[#6039DB]">
                            <UnCheckIcon className="h-6 w-6" />
                          </div>
                        )}
                      </div>
                    </>
                  )}
                </RadioGroup.Option>
              </div>
            ))}
          </div>
        </RadioGroup>
      </div>
      {selected === plans[1] && (
        <div className="grid grid-cols-3 gap-3 mt-10">
          {[1, 2, 3].map((item) => (
            <div
              key={item}
              className="rounded-md border-2 border-gray-100 p-4 flex justify-center items-center flex-col gap-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="50"
                height="50"
                viewBox="0 0 50 50"
                fill="none"
              >
                <rect
                  x="15.373"
                  y="15.8623"
                  width="19.0056"
                  height="19.0056"
                  rx="2.499"
                  fill="#007EBB"
                />
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M30.923 30.5416H28.6154V26.6114C28.6154 25.5338 28.206 24.9316 27.3531 24.9316C26.4252 24.9316 25.9405 25.5583 25.9405 26.6114V30.5416H23.7167V23.0546H25.9405V24.0631C25.9405 24.0631 26.6091 22.8258 28.1979 22.8258C29.786 22.8258 30.923 23.7956 30.923 25.8013V30.5416ZM21.0637 22.0742C20.3062 22.0742 19.6924 21.4556 19.6924 20.6926C19.6924 19.9297 20.3062 19.311 21.0637 19.311C21.8211 19.311 22.4346 19.9297 22.4346 20.6926C22.4346 21.4556 21.8211 22.0742 21.0637 22.0742ZM19.9154 30.5416H22.2343V23.0546H19.9154V30.5416Z"
                  fill="white"
                />
                <circle
                  cx="24.8787"
                  cy="25.365"
                  r="24.5955"
                  fill="#52B5F9"
                  fillOpacity="0.1"
                />
              </svg>
              <h4 className="text-sm font-semibold py-5">Template #{item}</h4>
              <button className="font-medium w-full border border-[#6039DB] rounded-md py-2 px-5 text-center text-[#6039DB]">
                Preview
              </button>
              <button className="font-medium w-full border border-[#6039DB] bg-[#6039DB] rounded-md py-2 px-5 text-center text-white">
                Choose template
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default LeftSideBar;

function CheckIcon(props: any) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
    >
      <rect width="16" height="16" rx="8" fill="#4F46E5" />
      <circle cx="8" cy="8" r="3" fill="white" />
    </svg>
  );
}

function UnCheckIcon(props: any) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="white" />
      <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="#D1D5DB" />
    </svg>
  );
}