93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { supabase } from '../lib/supabase';
|
|
|
|
export default function Blog({ blogData }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h1 className="text-4xl font-bold mb-6">Blog</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Gedanken, Tutorials und Artikel über verschiedene Themen.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{blogData && blogData.map((post, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.2 }}
|
|
className="relative p-8 bg-white before:content-[''] before:absolute before:top-0 before:left-0 before:w-8 before:h-8 before:border-t-2 before:border-l-2 before:border-pb-turquoise after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-8 after:h-8 after:border-b-2 after:border-r-2 after:border-pb-turquoise"
|
|
>
|
|
{post.image && (
|
|
<div className="relative w-full h-48 mb-4 overflow-hidden">
|
|
<Image
|
|
src={post.image}
|
|
alt={post.title}
|
|
fill
|
|
priority={index < 2}
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
<Link href={`/blog/${post.slug}`} legacyBehavior>
|
|
<a className="block group">
|
|
<h3 className="text-xl font-bold mb-2 group-hover:text-pb-turquoise transition-colors">{post.title}</h3>
|
|
<p className="text-gray-600 mb-4">{post.date}</p>
|
|
<p className="text-gray-600 mb-4">{post.description}</p>
|
|
<span className="text-pb-turquoise group-hover:underline">Weiterlesen</span>
|
|
</a>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps() {
|
|
try {
|
|
const { data: blogData, error } = await supabase
|
|
.from('blog_entries')
|
|
.select('*')
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error fetching blog data:', error);
|
|
return {
|
|
props: {
|
|
blogData: []
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
blogData: blogData || []
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error('Error in getServerSideProps:', error);
|
|
return {
|
|
props: {
|
|
blogData: []
|
|
}
|
|
};
|
|
}
|
|
}
|