bender/bd539cad-e5a1-45ab-8774-c070fc7bb50f
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update src/components/sections/blog/BlogCardTwo.tsx

Browse Source
This commit is contained in:
bender
2026-03-11 20:28:11 +00:00
parent 7d8a7ae55e
commit ed554bf24a
1 changed files with 4 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/sections/blog/BlogCardTwo.tsx
View File

@@ -3,9 +3,6 @@
import React, { useState } from "react";
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
import TextBox from "@/components/Textbox";
import { CardStack } from "@/components/card/CardStack";
import type { CardStackProps } from "@/components/card/CardStack";
import type { CardAnimationType } from "@/components/card/types";
export interface BlogCardTwoProps {
blogs: Array<{
@@ -22,7 +19,7 @@ export interface BlogCardTwoProps {
}>;
carouselMode?: "auto" | "buttons";
uniformGridCustomHeightClasses?: string;
animationType?: CardAnimationType;
animationType?: string;
title?: string;
titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
description?: string;
@@ -69,26 +66,8 @@ const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
buttons,
buttonAnimation,
textboxLayout = "default", useInvertedBackground = false,
ariaLabel = "Blog section", className = "", containerClassName = "", cardClassName = "", imageWrapperClassName = "", imageClassName = "", categoryClassName = "", cardTitleClassName = "", excerptClassName = "", authorContainerClassName = "", authorAvatarClassName = "", authorNameClassName = "", dateClassName = "", textBoxTitleClassName = "", textBoxTitleImageWrapperClassName = "", textBoxTitleImageClassName = "", textBoxDescriptionClassName = "", gridClassName = "", carouselClassName = "", controlsClassName = "", textBoxClassName = "", textBoxTagClassName = "", textBoxButtonContainerClassName = "", textBoxButtonClassName = "", textBoxButtonTextClassName = ""}) => {
ariaLabel = "Blog section", className = "", containerClassName = "", cardClassName = "", imageWrapperClassName = "", imageClassName = "", categoryClassName = "", cardTitleClassName = "", excerptClassName = "", authorContainerClassName = "", authorAvatarClassName = "", authorNameClassName = "", dateClassName = "", textBoxTitleClassName = "", textBoxTitleImageWrapperClassName = "", textBoxTitleImageClassName = "", textBoxDescriptionClassName = "", gridClassName = "", carouselClassName = "", controlsClassName = "", textBoxClassName = "", textBoxTagClassName = "", textBoxButtonContainerClassName = "", textBoxButtonClassName = "", textBoxButtonTextClassName = "" }) => {
const [currentIndex, setCurrentIndex] = useState(0);
const shouldCarousel = blogs.length > 4;
const mode = shouldCarousel ? "buttons" : "auto";
const cardStackProps: Omit<CardStackProps, "children"> = {
gridVariant: "uniform-all-items-equal", uniformGridCustomHeightClasses,
animationType: animationType as CardAnimationType,
carouselMode: mode,
carouselThreshold: 4,
currentIndex: shouldCarousel ? currentIndex : undefined,
onCarouselChange: shouldCarousel ? setCurrentIndex : undefined,
ariaLabel,
className,
containerClassName,
cardClassName,
gridClassName,
carouselClassName,
controlsClassName,
};
const blogCards = blogs.map((blog) => (
<div
@@ -184,9 +163,9 @@ const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
)}
<div className="max-w-content-width mx-auto px-4">
<CardStack {...cardStackProps}>
<div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
{blogCards}
</CardStack>
</div>
</div>
</div>
);