feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,150 @@
+"use client";
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Post } from '@/types/types';
+import { cn } from '@/lib/utils';
+import { Calendar, ArrowRight } from 'lucide-react';
+
+interface PostsGridProps {
+  posts: Post[];
+}
+
+const POSTS_PER_PAGE = 6;
+
+const categories = [
+  { id: 'wszystkie', label: 'Wszystkie' },
+  { id: 'klimatyzacja', label: 'Klimatyzacja' },
+  { id: 'pompy-ciepla', label: 'Pompy ciepła' },
+  { id: 'remonty', label: 'Remonty' },
+  { id: 'hydraulika', label: 'Hydraulika' },
+  { id: 'porady', label: 'Porady' },
+];
+
+export function PostsGrid({ posts }: PostsGridProps) {
+  const [activeCategory, setActiveCategory] = useState('wszystkie');
+  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);
+
+  const filteredPosts = posts.filter(
+    (post) => activeCategory === 'wszystkie' || post.category === activeCategory
+  );
+
+  const visiblePosts = filteredPosts.slice(0, visibleCount);
+  const hasMore = visibleCount < filteredPosts.length;
+
+  const handleShowMore = () => {
+    setVisibleCount(prev => prev + POSTS_PER_PAGE);
+  };
+
+  const handleCategoryChange = (categoryId: string) => {
+    setActiveCategory(categoryId);
+    setVisibleCount(POSTS_PER_PAGE); // Reset paginacji przy zmianie kategorii
+  };
+
+  const categoryLabels: Record<string, string> = {
+    'klimatyzacja': 'Klimatyzacja',
+    'pompy-ciepla': 'Pompy Ciepła',
+    'remonty': 'Remonty',
+    'hydraulika': 'Hydraulika',
+    'porady': 'Porady'
+  };
+
+  return (
+    <div className="py-12">
+      {/* Filtry */}
+      <div className="flex flex-wrap items-center gap-3 mb-12">
+        {categories.map((category) => (
+          <button
+            key={category.id}
+            onClick={() => handleCategoryChange(category.id)}
+            className={cn(
+              "px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 border",
+              activeCategory === category.id
+                ? "bg-primary text-white border-primary shadow-md"
+                : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
+            )}
+          >
+            {category.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Siatka Artykułów */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {visiblePosts.map((post) => {
+          const dateObj = new Date(post.date);
+          const formattedDate = dateObj.toLocaleDateString('pl-PL', {
+            day: 'numeric', month: 'long', year: 'numeric'
+          });
+
+          return (
+            <article 
+              key={post.slug} 
+              className="group flex flex-col bg-white rounded-2xl overflow-hidden border border-border hover:shadow-lg transition-all duration-300"
+            >
+              <Link href={`/blog/${post.slug}`} className="relative aspect-[16/10] overflow-hidden">
+                <Image
+                  src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&q=80'}
+                  alt={post.title}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+                <div className="absolute top-4 left-4">
+                  <span className="px-3 py-1 bg-accent text-white text-[10px] font-bold rounded-full uppercase tracking-wider shadow-sm">
+                    {categoryLabels[post.category] || post.category}
+                  </span>
+                </div>
+              </Link>
+              
+              <div className="flex flex-col flex-grow p-6 md:p-8">
+                <div className="flex items-center gap-2 text-xs font-medium text-text-muted mb-3">
+                  <Calendar className="w-3.5 h-3.5 text-primary/50" />
+                  <span>{formattedDate}</span>
+                </div>
+                
+                <h3 className="text-xl font-bold text-primary font-heading leading-snug mb-3 group-hover:text-accent transition-colors">
+                  <Link href={`/blog/${post.slug}`}>
+                    {post.title}
+                  </Link>
+                </h3>
+                
+                <p className="text-sm text-text-muted leading-relaxed line-clamp-3 mb-6 flex-grow">
+                  {post.excerpt}
+                </p>
+                
+                <div className="mt-auto">
+                  <Link 
+                    href={`/blog/${post.slug}`}
+                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary group-hover:text-accent transition-colors"
+                  >
+                    <span>Czytaj więcej</span>
+                    <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+                  </Link>
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+
+      {visiblePosts.length === 0 && (
+        <div className="text-center py-16 bg-slate-50 rounded-2xl border border-border">
+          <p className="text-lg text-text-muted font-medium">Brak artykułów w tej kategorii.</p>
+        </div>
+      )}
+
+      {/* Pokaż więcej */}
+      {hasMore && (
+        <div className="mt-12 flex justify-center">
+          <button 
+            onClick={handleShowMore}
+            className="btn btn-outline btn-primary bg-white font-bold"
+          >
+            Wczytaj więcej artykułów
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}