Initial commit

src/components/PricingList/index.tsx

@@ -0,0 +1,138 @@
+import { useRef, useState } from "react";
+import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
+import Button from "@/components/Button";
+import Image from "@/components/Image";
+
+import { pricing } from "@/mocks/pricing";
+
+type PricingListProps = {
+    monthly?: boolean;
+};
+
+const PricingList = ({ monthly = true }: PricingListProps) => {
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    const ref = useRef<any>(null);
+
+    const handleClick = (index: number) => {
+        setActiveIndex(index);
+        ref.current?.go(index);
+    };
+
+    return (
+        <Splide
+            className="splide-pricing splide-visible"
+            options={{
+                mediaQuery: "min",
+                autoWidth: true,
+                pagination: false,
+                arrows: false,
+                gap: "1rem",
+                breakpoints: {
+                    1024: {
+                        destroy: true,
+                    },
+                },
+            }}
+            onMoved={(e, newIndex) => setActiveIndex(newIndex)}
+            hasTrack={false}
+            ref={ref}
+        >
+            <SplideTrack>
+                {pricing.map((item, index) => (
+                    <SplideSlide
+                        className={`${index === 1 ? "" : "py-3"}`}
+                        key={item.id}
+                    >
+                        <div
+                            className={`w-[19rem] h-full px-6 ${
+                                index === 1 ? "py-12" : "py-8"
+                            } bg-n-8 border border-n-6 rounded-[2rem] lg:w-auto`}
+                            key={item.id}
+                        >
+                            <h4
+                                className={`h4 mb-4 ${
+                                    index === 0 ? "text-color-2" : ""
+                                } ${index === 1 ? "text-color-1" : ""} ${
+                                    index === 2 ? "text-color-3" : ""
+                                }`}
+                            >
+                                {item.title}
+                            </h4>
+                            <p className="body-2 min-h-[4rem] mb-3 text-n-1/50">
+                                {item.description}
+                            </p>
+                            <div className="flex items-center h-[5.5rem] mb-6">
+                                {item.price && (
+                                    <>
+                                        <div className="h3">$</div>
+                                        <div className="text-[5.5rem] leading-none font-bold">
+                                            {monthly
+                                                ? item.price
+                                                : item.price !== "0"
+                                                ? (
+                                                      +item.price *
+                                                      12 *
+                                                      0.9
+                                                  ).toFixed(1)
+                                                : item.price}
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+                            <Button
+                                className="w-full mb-6"
+                                href={
+                                    item.price
+                                        ? "/pricing"
+                                        : "mailto:info@ui8.net"
+                                }
+                                white={!!item.price}
+                            >
+                                {item.price ? "Get started" : "Contact us"}
+                            </Button>
+                            <ul>
+                                {item.features.map((feature, index) => (
+                                    <li
+                                        className="flex items-start py-5 border-t border-n-6"
+                                        key={index}
+                                    >
+                                        <Image
+                                            src="/images/check.svg"
+                                            width={24}
+                                            height={24}
+                                            alt="Check"
+                                        />
+                                        <p className="body-2 ml-4">{feature}</p>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </SplideSlide>
+                ))}
+            </SplideTrack>
+            <div className="flex justify-center mt-8 -mx-2 md:mt-15 lg:hidden">
+                {pricing.map((item, index) => (
+                    <button
+                        className="relative w-6 h-6 mx-2"
+                        onClick={() => handleClick(index)}
+                        key={item.id}
+                    >
+                        <span
+                            className={`absolute inset-0 bg-conic-gradient rounded-full transition-opacity ${
+                                index === activeIndex
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                            }`}
+                        ></span>
+                        <span className="absolute inset-0.25 bg-n-8 rounded-full">
+                            <span className="absolute inset-2 bg-n-1 rounded-full"></span>
+                        </span>
+                    </button>
+                ))}
+            </div>
+        </Splide>
+    );
+};
+
+export default PricingList;