Skip to content

Commit 0985a4d

Browse files
Porx312Porx312
committed
prettier
1 parent 43907b0 commit 0985a4d

File tree

4 files changed

+184
-158
lines changed

4 files changed

+184
-158
lines changed

‎components/BlogCard.tsx‎

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ interface BlogCardProps {
1414

1515
export default function BlogCard({ post }: BlogCardProps) {
1616
const { title, summary, date, tags, path } = post
17-
17+
1818
return (
19-
<div
20-
className="group relative transform cursor-pointer transition-all duration-500 hover:-rotate-1 hover:scale-105 h-full"
21-
>
22-
<div className="hover:shadow-3xl relative z-10 w-full overflow-hidden rounded-3xl border border-red-500/20 bg-gradient-to-tr from-[#0F0F0F] to-[#0B0B0B] text-white shadow-2xl backdrop-blur-xl duration-700 hover:border-red-500/40 hover:shadow-red-500/10 h-full flex flex-col aspect-square">
19+
<div className="group relative h-full transform cursor-pointer transition-all duration-500 hover:-rotate-1 hover:scale-105">
20+
<div className="hover:shadow-3xl relative z-10 flex aspect-square h-full w-full flex-col overflow-hidden rounded-3xl border border-red-500/20 bg-gradient-to-tr from-[#0F0F0F] to-[#0B0B0B] text-white shadow-2xl backdrop-blur-xl duration-700 hover:border-red-500/40 hover:shadow-red-500/10">
2321
{/* Background Effects */}
24-
<div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
22+
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
2523
<div className="absolute inset-0 bg-gradient-to-tr from-red-500/5 to-red-400/10 opacity-40 transition-opacity duration-500 group-hover:opacity-60"></div>
2624
<div className="absolute -bottom-20 -left-20 h-48 w-48 transform animate-bounce rounded-full bg-gradient-to-tr from-red-500/10 to-transparent opacity-30 blur-3xl transition-all delay-500 duration-700 group-hover:scale-110 group-hover:opacity-50"></div>
2725
<div className="absolute left-10 top-10 h-16 w-16 animate-ping rounded-full bg-red-500/5 blur-xl"></div>
@@ -30,38 +28,48 @@ export default function BlogCard({ post }: BlogCardProps) {
3028
</div>
3129

3230
{/* Content */}
33-
<div className="relative z-10 p-8 flex flex-col h-full">
34-
<div className="mb-4 flex flex-wrap gap-2">
35-
{tags?.map((tag) => (
36-
<Tag key={tag} text={tag} />
37-
))}
38-
</div>
39-
40-
<h2 className="mb-3 text-2xl font-bold leading-tight text-gray-100 group-hover:text-red-500 transition-colors duration-300">
41-
<Link href={`/${path}`} className="focus:outline-none">
42-
<span className="absolute inset-0" aria-hidden="true" />
43-
{title}
44-
</Link>
45-
</h2>
31+
<div className="relative z-10 flex h-full flex-col p-8">
32+
<div className="mb-4 flex flex-wrap gap-2">
33+
{tags?.map((tag) => (
34+
<Tag key={tag} text={tag} />
35+
))}
36+
</div>
37+
38+
<h2 className="mb-3 text-2xl font-bold leading-tight text-gray-100 transition-colors duration-300 group-hover:text-red-500">
39+
<Link href={`/${path}`} className="focus:outline-none">
40+
<span className="absolute inset-0" aria-hidden="true" />
41+
{title}
42+
</Link>
43+
</h2>
44+
45+
<div className="mb-4 flex items-center text-sm text-gray-400">
46+
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
47+
</div>
4648

47-
<div className="mb-4 flex items-center text-sm text-gray-400">
48-
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
49-
</div>
49+
<p className="mb-6 line-clamp-4 flex-grow text-sm text-gray-300 sm:text-base">
50+
{summary}
51+
</p>
5052

51-
<p className="mb-6 text-gray-300 line-clamp-4 flex-grow text-sm sm:text-base">
52-
{summary}
53-
</p>
53+
<div className="mt-auto flex items-center pt-4 text-sm font-medium text-red-500 transition-colors duration-300 group-hover:text-red-400">
54+
Leer Más
55+
<svg
56+
className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1"
57+
fill="none"
58+
viewBox="0 0 24 24"
59+
stroke="currentColor"
60+
>
61+
<path
62+
strokeLinecap="round"
63+
strokeLinejoin="round"
64+
strokeWidth={2}
65+
d="M14 5l7 7m0 0l-7 7m7-7H3"
66+
/>
67+
</svg>
68+
</div>
5469

55-
<div className="mt-auto pt-4 flex items-center text-sm font-medium text-red-500 transition-colors duration-300 group-hover:text-red-400">
56-
Leer Más
57-
<svg className="ml-2 h-4 w-4 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
58-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
59-
</svg>
60-
</div>
61-
62-
{/* Decorative corner accents */}
63-
<div className="absolute left-0 top-0 h-20 w-20 rounded-br-3xl bg-gradient-to-br from-red-500/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 pointer-events-none"></div>
64-
<div className="absolute bottom-0 right-0 h-20 w-20 rounded-tl-3xl bg-gradient-to-tl from-red-500/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 pointer-events-none"></div>
70+
{/* Decorative corner accents */}
71+
<div className="pointer-events-none absolute left-0 top-0 h-20 w-20 rounded-br-3xl bg-gradient-to-br from-red-500/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
72+
<div className="pointer-events-none absolute bottom-0 right-0 h-20 w-20 rounded-tl-3xl bg-gradient-to-tl from-red-500/10 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"></div>
6573
</div>
6674
</div>
6775
</div>

0 commit comments

Comments
 (0)