139 lines
5.7 KiB
TypeScript
139 lines
5.7 KiB
TypeScript
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;
|