development/6d96d761-e665-450e-83fb-343d23264278
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Free edit: add instagram icon to each card on the left side o

Browse Source
This commit is contained in:
kudindmitriy
2026-01-26 17:43:23 +02:00
parent 32be99f679
commit ac6197c8ee
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/sections/blog/BlogCardOne.tsx
View File

@@ -7,10 +7,10 @@ import Badge from "@/components/shared/Badge";
import OverlayArrowButton from "@/components/shared/OverlayArrowButton"; import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
import { cls, shouldUseInvertedText } from "@/lib/utils"; import { cls, shouldUseInvertedText } from "@/lib/utils";
import { useTheme } from "@/providers/themeProvider/ThemeProvider"; import { useTheme } from "@/providers/themeProvider/ThemeProvider";
import { LinkedIn } from "lucide-react";
import type { LucideIcon } from "lucide-react"; import type { LucideIcon } from "lucide-react";
import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; import type { ButtonConfig, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
import { Instagram } from "lucide-react";
type BlogCard = { type BlogCard = {
id: string; id: string;
@@ -103,6 +103,9 @@ const BlogCardItem = memo(({
aria-label={`${blog.title} by ${blog.authorName}`} aria-label={`${blog.title} by ${blog.authorName}`}
> >
<div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}> <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
<div className="absolute left-2 top-2">
<Instagram className="w-6 h-6 text-white hover:blur-sm" />
</div>
<Image <Image
src={blog.imageSrc} src={blog.imageSrc}
alt={blog.imageAlt || blog.title} alt={blog.imageAlt || blog.title}
@@ -138,11 +141,6 @@ const BlogCardItem = memo(({
<div className="flex flex-col"> <div className="flex flex-col">
<p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}> <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
{blog.authorName} {blog.authorName}
{blog.linkedinUrl && (
<a href={blog.linkedinUrl} target="_blank" rel="noopener noreferrer" className="ml-1">
<LinkedIn size={16} />
</a>
)}
</p> </p>
<p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}> <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
{blog.date} {blog.date}