108 lines
5.5 KiB
JavaScript
108 lines
5.5 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import { Splide, SplideSlide } from "@splidejs/react-splide";
|
|
import Section from "@/components/Section";
|
|
import Image from "@/components/Image";
|
|
|
|
import { community } from "@/mocks/community";
|
|
|
|
type CommunityProps = {};
|
|
|
|
const Community = ({}: CommunityProps) => {
|
|
const [activeIndex, setActiveIndex] = useState<number>(0);
|
|
|
|
const ref = useRef<any>(null);
|
|
|
|
const handleClick = (index: number) => {
|
|
setActiveIndex(index);
|
|
ref.current?.go(index);
|
|
};
|
|
|
|
return (
|
|
<Section className="">
|
|
<div className="container">
|
|
<div className="relative p-0.5 bg-gradient-to-b from-color-2/80 from-[4.5rem] via-color-1/40 via-[9rem] to-n-1/15 rounded-3xl">
|
|
<div className="pt-20 px-5 py-10 bg-n-8 rounded-[1.375rem] md:pt-20 md:px-20 mb:pb-16 lg:py-28 lg:pr-48">
|
|
<Splide
|
|
options={{
|
|
type: "fade",
|
|
pagination: false,
|
|
arrows: false,
|
|
}}
|
|
onMoved={(e, newIndex) => setActiveIndex(newIndex)}
|
|
ref={ref}
|
|
>
|
|
{community.map((comment) => (
|
|
<SplideSlide className="flex" key={comment.id}>
|
|
<div className="flex flex-col lg:flex-row lg:items-start">
|
|
<div className="quote mb-6 md:mb-12 lg:mb-0 lg:text-[1.75rem] lg:leading-[2.25rem]">
|
|
{comment.text}
|
|
</div>
|
|
<div className="flex items-center mt-auto lg:block lg:mt-0 lg:ml-20">
|
|
<div className="w-20 mr-6 lg:w-40 lg:mr-0 lg:mb-11">
|
|
<Image
|
|
className="w-full rounded-2xl"
|
|
src={comment.avatarUrl}
|
|
width={160}
|
|
height={160}
|
|
alt={comment.name}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h6 className="h6">
|
|
{comment.name}
|
|
</h6>
|
|
<div className="caption text-n-1/25">
|
|
{comment.role}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SplideSlide>
|
|
))}
|
|
</Splide>
|
|
<div
|
|
className="flex justify-center mt-10 -mx-2 md:mt-12 md:justify-start lg:absolute lg:top-0
|
|
lg:right-20 lg:h-full lg:flex-col lg:justify-center lg:m-0"
|
|
>
|
|
{community.map((item: any, index: number) => (
|
|
<button
|
|
className="relative w-6 h-6 mx-2 lg:my-2 lg:mx-0"
|
|
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>
|
|
</div>
|
|
<div className="absolute -top-14 left-0 z-2 font-code text-[11.25rem] text-color-1 leading-none md:left-12">
|
|
“
|
|
</div>
|
|
<div className="absolute top-0 right-0 bg-n-8">
|
|
<svg width="72" height="72" viewBox="0 0 72 72">
|
|
<path
|
|
fill="#0E0C15"
|
|
stroke="#FFC876"
|
|
strokeWidth="2"
|
|
strokeOpacity=".8"
|
|
d="M-1176,1 L6.15,1 C13.89,1 21.35,3.89547 27.06,9.11714 L60.91,40.0541 C67.34,45.9271 71,54.2315 71,62.937 L71,444 C71,461.121 57.12,475 40,475 L-1176,475 C-1193.1209,475 -1207,461.121 -1207,444 L-1207,32 C-1207,14.8792 -1193.1208,1 -1176,1 Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default Community;
|