damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: capture live server state before migration (2026-06-10)

Browse Source
This commit is contained in:
damjan_savic
2026-06-10 23:56:36 +02:00
parent 97bf6da106
commit b6ad1e0b2f
52 changed files with 704 additions and 691 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/blog/BlogList.tsx
+33 -33
View File
@@ -71,27 +71,27 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
return (
<Link
href={`/${locale}/blog/${post.slug}`}
className="group relative block bg-zinc-900/50 backdrop-blur-sm
className="group relative block bg-background/50 backdrop-blur-sm
rounded-xl shadow-lg hover:shadow-2xl
ring-1 ring-zinc-800 hover:ring-zinc-700
ring-1 ring-border hover:ring-border
transition-all duration-500 focus:outline-none focus:ring-2
focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
focus:ring-ring focus:ring-offset-2 focus:ring-offset-background
transform hover:-translate-y-1"
>
<div className="relative overflow-hidden rounded-xl">
{/* Image Container */}
<div className="aspect-[16/9] w-full relative overflow-hidden bg-zinc-900">
<div className="aspect-[16/9] w-full relative overflow-hidden bg-background">
<BlogImage
src={getImagePath(post.coverImage)}
alt={post.title}
fallback={PLACEHOLDER_IMAGE}
/>
<div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-zinc-900 via-zinc-900/70 to-transparent opacity-95" />
<div className="absolute inset-x-0 -bottom-20 top-0 bg-gradient-to-t from-background via-background/70 to-transparent opacity-95" />
</div>
{/* Content */}
<div className="relative -mt-2 p-6 bg-zinc-900 z-10">
<div className="flex items-center gap-4 mb-4 text-zinc-500">
<div className="relative -mt-2 p-6 bg-background z-10">
<div className="flex items-center gap-4 mb-4 text-muted-foreground">
<div className="flex items-center gap-2 text-sm">
<Calendar className="h-4 w-4" />
<span>{getFormattedDate(post.date, locale)}</span>
@@ -104,12 +104,12 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
)}
</div>
<h3 className="text-xl font-semibold text-white mb-3
group-hover:text-zinc-100 transition-colors duration-300">
<h3 className="text-xl font-semibold text-foreground mb-3
group-hover:text-foreground/90 transition-colors duration-300">
{post.title}
</h3>
<p className="text-zinc-400 text-sm line-clamp-2 mb-4
group-hover:text-zinc-300 transition-colors duration-300">
<p className="text-muted-foreground text-sm line-clamp-2 mb-4
group-hover:text-foreground/80 transition-colors duration-300">
{post.excerpt}
</p>
@@ -118,17 +118,17 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
{post.tags?.slice(0, 3).map((tag, index) => (
<span
key={index}
className="px-3 py-1 bg-zinc-800/50
text-sm text-zinc-400 rounded-full
ring-1 ring-zinc-700/50 group-hover:ring-zinc-600/50
group-hover:bg-zinc-800/70 group-hover:text-zinc-300
className="px-3 py-1 bg-card/50
text-sm text-muted-foreground rounded-full
ring-1 ring-border/50 group-hover:ring-ring/50
group-hover:bg-card/70 group-hover:text-foreground/80
transition-all duration-300"
>
{tag}
</span>
))}
{post.tags && post.tags.length > 3 && (
<span className="text-sm text-zinc-600">
<span className="text-sm text-muted-foreground/60">
+{post.tags.length - 3} more
</span>
)}
@@ -136,11 +136,11 @@ function BlogPostCard({ post, locale }: { post: BlogPost; locale: string }) {
{/* Link Icon */}
<div className="absolute top-6 right-6 p-2.5 rounded-full
bg-zinc-800/60 backdrop-blur-sm ring-1 ring-zinc-700/50
bg-card/60 backdrop-blur-sm ring-1 ring-border/50
opacity-0 group-hover:opacity-100
transform translate-y-2 group-hover:translate-y-0
transition-all duration-300">
<ExternalLink className="h-4 w-4 text-zinc-400" />
<ExternalLink className="h-4 w-4 text-muted-foreground" />
</div>
</div>
</div>
@@ -203,9 +203,9 @@ function Pagination({
{currentPage > 1 ? (
<button
onClick={() => onPageChange(currentPage - 1)}
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
hover:ring-zinc-600 transition-all duration-200"
className="flex items-center gap-1 px-3 py-2 text-sm text-muted-foreground hover:text-foreground
bg-card/50 hover:bg-card rounded-lg ring-1 ring-border/50
hover:ring-ring transition-all duration-200"
aria-label={t('ui.pagination.previous')}
>
<ChevronLeft className="h-4 w-4" />
@@ -213,8 +213,8 @@ function Pagination({
</button>
) : (
<span
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
className="flex items-center gap-1 px-3 py-2 text-sm text-muted-foreground/60
bg-card/30 rounded-lg ring-1 ring-border/50 cursor-not-allowed"
aria-disabled="true"
>
<ChevronLeft className="h-4 w-4" />
@@ -227,7 +227,7 @@ function Pagination({
{getPageNumbers().map((page, index) => {
if (page === 'ellipsis') {
return (
<span key={`ellipsis-${index}`} className="px-2 text-zinc-600">
<span key={`ellipsis-${index}`} className="px-2 text-muted-foreground/60">
...
</span>
);
@@ -242,8 +242,8 @@ function Pagination({
className={`min-w-[44px] h-11 flex items-center justify-center text-sm rounded-lg
ring-1 transition-all duration-200
${isCurrentPage
? 'bg-[#697565] text-white ring-[#697565] font-medium'
: 'text-zinc-400 hover:text-white bg-zinc-800/50 hover:bg-zinc-800 ring-zinc-700/50 hover:ring-zinc-600'
? 'bg-[#697565] text-foreground ring-[#697565] font-medium'
: 'text-muted-foreground hover:text-foreground bg-card/50 hover:bg-card ring-border/50 hover:ring-ring'
}`}
aria-current={isCurrentPage ? 'page' : undefined}
>
@@ -257,9 +257,9 @@ function Pagination({
{currentPage < totalPages ? (
<button
onClick={() => onPageChange(currentPage + 1)}
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-400 hover:text-white
bg-zinc-800/50 hover:bg-zinc-800 rounded-lg ring-1 ring-zinc-700/50
hover:ring-zinc-600 transition-all duration-200"
className="flex items-center gap-1 px-3 py-2 text-sm text-muted-foreground hover:text-foreground
bg-card/50 hover:bg-card rounded-lg ring-1 ring-border/50
hover:ring-ring transition-all duration-200"
aria-label={t('ui.pagination.next')}
>
<span className="hidden sm:inline">{t('ui.pagination.next')}</span>
@@ -267,8 +267,8 @@ function Pagination({
</button>
) : (
<span
className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-600
bg-zinc-800/30 rounded-lg ring-1 ring-zinc-800/50 cursor-not-allowed"
className="flex items-center gap-1 px-3 py-2 text-sm text-muted-foreground/60
bg-card/30 rounded-lg ring-1 ring-border/50 cursor-not-allowed"
aria-disabled="true"
>
<span className="hidden sm:inline">{t('ui.pagination.next')}</span>
@@ -389,7 +389,7 @@ export function BlogList({ posts, locale, initialSearch = '', initialCategory =
</div>
{/* Results count */}
<p className="text-sm text-zinc-500 mb-6">
<p className="text-sm text-muted-foreground mb-6">
{translations.showingText(
startIndex + 1,
Math.min(endIndex, filteredPosts.length),
@@ -421,7 +421,7 @@ export function BlogList({ posts, locale, initialSearch = '', initialCategory =
) : (
/* Empty State */
<div className="text-center py-12">
<p className="text-zinc-400">{translations.noPostsText}</p>
<p className="text-muted-foreground">{translations.noPostsText}</p>
</div>
)}
</div>