Update src/components/sections/feature/FeatureCardTwentyOne.tsx
This commit is contained in:
@@ -1,235 +1,120 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import TextBox from "@/components/Textbox";
|
import { LucideIcon } from "lucide-react";
|
||||||
import Accordion from "@/components/Accordion";
|
|
||||||
import MediaContent from "@/components/shared/MediaContent";
|
|
||||||
import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
|
|
||||||
import { cls } from "@/lib/utils";
|
|
||||||
import type { LucideIcon } from "lucide-react";
|
|
||||||
import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "@/components/cardStack/types";
|
|
||||||
import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
|
|
||||||
|
|
||||||
type MediaProps =
|
interface AccordionItem {
|
||||||
| {
|
id: string;
|
||||||
imageSrc: string;
|
title: string;
|
||||||
imageAlt?: string;
|
content: string;
|
||||||
videoSrc?: never;
|
}
|
||||||
videoAriaLabel?: never;
|
|
||||||
}
|
|
||||||
| {
|
|
||||||
videoSrc: string;
|
|
||||||
videoAriaLabel?: string;
|
|
||||||
imageSrc?: never;
|
|
||||||
imageAlt?: never;
|
|
||||||
};
|
|
||||||
|
|
||||||
type AccordionItem = {
|
interface FeatureCardTwentyOneProps {
|
||||||
id: string;
|
title: string;
|
||||||
title: string;
|
description: string;
|
||||||
content: string;
|
tag: string;
|
||||||
};
|
tagIcon: LucideIcon;
|
||||||
|
tagAnimation?: string;
|
||||||
|
accordionItems: AccordionItem[];
|
||||||
|
}
|
||||||
|
|
||||||
type FeatureCardTwentyOneProps = MediaProps & {
|
export default function FeatureCardTwentyOne({
|
||||||
title: string;
|
title,
|
||||||
titleSegments?: TitleSegment[];
|
description,
|
||||||
description: string;
|
tag,
|
||||||
tag?: string;
|
tagIcon: TagIcon,
|
||||||
tagIcon?: LucideIcon;
|
accordionItems,
|
||||||
tagAnimation?: ButtonAnimationType;
|
}: FeatureCardTwentyOneProps) {
|
||||||
buttons?: ButtonConfig[];
|
const [flipped, setFlipped] = useState<{ [key: string]: boolean }>({});
|
||||||
buttonAnimation?: ButtonAnimationType;
|
|
||||||
mediaAnimation: ButtonAnimationType;
|
|
||||||
accordionItems: AccordionItem[];
|
|
||||||
useInvertedBackground: InvertedBackground;
|
|
||||||
mediaPosition?: "left" | "right";
|
|
||||||
ariaLabel?: string;
|
|
||||||
className?: string;
|
|
||||||
containerClassName?: string;
|
|
||||||
mediaWrapperClassName?: string;
|
|
||||||
mediaClassName?: string;
|
|
||||||
contentClassName?: string;
|
|
||||||
textBoxClassName?: string;
|
|
||||||
titleClassName?: string;
|
|
||||||
descriptionClassName?: string;
|
|
||||||
tagClassName?: string;
|
|
||||||
buttonContainerClassName?: string;
|
|
||||||
buttonClassName?: string;
|
|
||||||
buttonTextClassName?: string;
|
|
||||||
titleImageWrapperClassName?: string;
|
|
||||||
titleImageClassName?: string;
|
|
||||||
accordionContainerClassName?: string;
|
|
||||||
accordionClassName?: string;
|
|
||||||
accordionTitleClassName?: string;
|
|
||||||
accordionContentClassName?: string;
|
|
||||||
accordionIconContainerClassName?: string;
|
|
||||||
accordionIconClassName?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const FeatureCardTwentyOne = ({
|
const toggleFlip = (id: string) => {
|
||||||
title,
|
setFlipped((prev) => ({
|
||||||
titleSegments,
|
...prev,
|
||||||
description,
|
[id]: !prev[id],
|
||||||
tag,
|
}));
|
||||||
tagIcon,
|
};
|
||||||
tagAnimation,
|
|
||||||
buttons,
|
|
||||||
buttonAnimation,
|
|
||||||
mediaAnimation,
|
|
||||||
accordionItems,
|
|
||||||
imageSrc,
|
|
||||||
imageAlt,
|
|
||||||
videoSrc,
|
|
||||||
videoAriaLabel,
|
|
||||||
useInvertedBackground,
|
|
||||||
mediaPosition = "left",
|
|
||||||
ariaLabel = "Feature section",
|
|
||||||
className = "",
|
|
||||||
containerClassName = "",
|
|
||||||
mediaWrapperClassName = "",
|
|
||||||
mediaClassName = "",
|
|
||||||
contentClassName = "",
|
|
||||||
textBoxClassName = "",
|
|
||||||
titleClassName = "",
|
|
||||||
descriptionClassName = "",
|
|
||||||
tagClassName = "",
|
|
||||||
buttonContainerClassName = "",
|
|
||||||
buttonClassName = "",
|
|
||||||
buttonTextClassName = "",
|
|
||||||
titleImageWrapperClassName = "",
|
|
||||||
titleImageClassName = "",
|
|
||||||
accordionContainerClassName = "",
|
|
||||||
accordionClassName = "",
|
|
||||||
accordionTitleClassName = "",
|
|
||||||
accordionContentClassName = "",
|
|
||||||
accordionIconContainerClassName = "",
|
|
||||||
accordionIconClassName = "",
|
|
||||||
}: FeatureCardTwentyOneProps) => {
|
|
||||||
const [activeAccordion, setActiveAccordion] = useState<number>(0);
|
|
||||||
const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
|
|
||||||
|
|
||||||
const handleAccordionToggle = (index: number) => {
|
return (
|
||||||
setActiveAccordion(activeAccordion === index ? -1 : index);
|
<section className="w-full py-12 md:py-20 lg:py-24">
|
||||||
};
|
<div className="container mx-auto px-4 md:px-6">
|
||||||
|
{/* Header Section */}
|
||||||
const mediaElement = (
|
<div className="mb-12 md:mb-16 text-center">
|
||||||
<div
|
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
|
||||||
ref={mediaContainerRef}
|
<TagIcon className="w-4 h-4 text-blue-600" />
|
||||||
className={cls(
|
<span className="text-sm font-semibold text-blue-600">{tag}</span>
|
||||||
"w-full md:w-1/2 h-[50svh] md:h-auto card rounded-theme-capped overflow-hidden",
|
</div>
|
||||||
mediaWrapperClassName
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
|
||||||
)}
|
{title}
|
||||||
>
|
</h2>
|
||||||
<MediaContent
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
imageSrc={imageSrc}
|
{description}
|
||||||
videoSrc={videoSrc}
|
</p>
|
||||||
imageAlt={imageAlt}
|
|
||||||
videoAriaLabel={videoAriaLabel}
|
|
||||||
imageClassName={cls("w-full h-full object-cover", mediaClassName)}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
|
|
||||||
const contentElement = (
|
{/* Flip Cards Grid */}
|
||||||
<div className={cls(
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
||||||
"w-full md:w-1/2 flex flex-col",
|
{accordionItems.map((item) => (
|
||||||
contentClassName
|
<div
|
||||||
)}>
|
key={item.id}
|
||||||
{/* Mobile */}
|
className="h-80 cursor-pointer perspective"
|
||||||
<TextBox
|
onClick={() => toggleFlip(item.id)}
|
||||||
title={title}
|
>
|
||||||
titleSegments={titleSegments}
|
<div
|
||||||
description={description}
|
className="relative w-full h-full transition-transform duration-500 transform-gpu"
|
||||||
tag={tag}
|
style={{
|
||||||
tagIcon={tagIcon}
|
transformStyle: "preserve-3d",
|
||||||
tagAnimation={tagAnimation}
|
transform: flipped[item.id]
|
||||||
buttons={buttons}
|
? "rotateY(180deg)"
|
||||||
buttonAnimation={buttonAnimation}
|
: "rotateY(0deg)",
|
||||||
useInvertedBackground={useInvertedBackground}
|
}}
|
||||||
className={cls("flex flex-col gap-1 md:hidden", textBoxClassName)}
|
>
|
||||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
{/* Front Side */}
|
||||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
<div
|
||||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
|
||||||
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
|
style={{
|
||||||
buttonClassName={buttonClassName}
|
backfaceVisibility: "hidden",
|
||||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
}}
|
||||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
>
|
||||||
titleImageClassName={titleImageClassName}
|
<div>
|
||||||
center={true}
|
<h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
|
||||||
/>
|
{item.title}
|
||||||
{/* Desktop */}
|
</h3>
|
||||||
<TextBox
|
<p className="text-gray-500 text-sm">
|
||||||
title={title}
|
Click to read more
|
||||||
titleSegments={titleSegments}
|
</p>
|
||||||
description={description}
|
</div>
|
||||||
tag={tag}
|
<div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
|
||||||
tagIcon={tagIcon}
|
<span className="text-blue-600 font-bold text-lg">
|
||||||
tagAnimation={tagAnimation}
|
{item.id}
|
||||||
buttons={buttons}
|
</span>
|
||||||
buttonAnimation={buttonAnimation}
|
</div>
|
||||||
useInvertedBackground={useInvertedBackground}
|
</div>
|
||||||
className={cls("hidden md:flex flex-col gap-1", textBoxClassName)}
|
|
||||||
titleClassName={cls("text-4xl md:text-5xl font-medium text-center md:text-left text-balance", titleClassName)}
|
|
||||||
descriptionClassName={cls("text-base md:text-lg leading-[1.2] text-center md:text-left", descriptionClassName)}
|
|
||||||
tagClassName={cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-1 md:mb-2", tagClassName)}
|
|
||||||
buttonContainerClassName={cls("flex flex-wrap gap-4 max-md:justify-center mt-4", buttonContainerClassName)}
|
|
||||||
buttonClassName={buttonClassName}
|
|
||||||
buttonTextClassName={cls("text-base", buttonTextClassName)}
|
|
||||||
titleImageWrapperClassName={titleImageWrapperClassName}
|
|
||||||
titleImageClassName={titleImageClassName}
|
|
||||||
center={false}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={cls(
|
{/* Back Side */}
|
||||||
"flex flex-col mt-8 divide-y divide-accent/20 border-y border-accent/20",
|
<div
|
||||||
accordionContainerClassName
|
className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
|
||||||
)}>
|
style={{
|
||||||
{accordionItems.map((item, index) => (
|
backfaceVisibility: "hidden",
|
||||||
<Accordion
|
transform: "rotateY(180deg)",
|
||||||
key={item.id}
|
}}
|
||||||
index={index}
|
>
|
||||||
isActive={activeAccordion === index}
|
<div>
|
||||||
onToggle={handleAccordionToggle}
|
<h3 className="text-xl md:text-2xl font-bold text-white mb-4">
|
||||||
title={item.title}
|
{item.title}
|
||||||
content={item.content}
|
</h3>
|
||||||
showCard={false}
|
<p className="text-blue-50 text-sm leading-relaxed">
|
||||||
useInvertedBackground={!useInvertedBackground ? undefined : useInvertedBackground}
|
{item.content}
|
||||||
className={cls("py-4 md:py-6", accordionClassName)}
|
</p>
|
||||||
titleClassName={cls("text-xl md:text-2xl", accordionTitleClassName)}
|
</div>
|
||||||
contentClassName={accordionContentClassName}
|
<p className="text-blue-200 text-xs text-center">
|
||||||
iconContainerClassName={accordionIconContainerClassName}
|
Click to flip back
|
||||||
iconClassName={accordionIconClassName}
|
</p>
|
||||||
/>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</section>
|
||||||
return (
|
);
|
||||||
<section
|
}
|
||||||
aria-label={ariaLabel}
|
|
||||||
className={cls("relative w-full py-20", useInvertedBackground && "bg-foreground", className)}
|
|
||||||
>
|
|
||||||
<div className={cls(
|
|
||||||
"w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-15",
|
|
||||||
containerClassName
|
|
||||||
)}>
|
|
||||||
{mediaPosition === "left" ? (
|
|
||||||
<>
|
|
||||||
{mediaElement}
|
|
||||||
{contentElement}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{contentElement}
|
|
||||||
{mediaElement}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
FeatureCardTwentyOne.displayName = "FeatureCardTwentyOne";
|
|
||||||
|
|
||||||
export default FeatureCardTwentyOne;
|
|
||||||
Reference in New Issue
Block a user