64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { ArrowRight, Camera } from "lucide-react";
|
|
import ScrollReveal from "@/components/ScrollReveal";
|
|
|
|
interface InstagramFeedProps {
|
|
instagramPosts: any[];
|
|
lang: string;
|
|
}
|
|
|
|
export default function InstagramFeed({ instagramPosts, lang }: InstagramFeedProps) {
|
|
if (!instagramPosts || instagramPosts.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section className="py-28 bg-background">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<ScrollReveal className="text-center mb-16">
|
|
<span className="inline-block text-accent text-xs tracking-[0.25em] uppercase font-semibold mb-4">
|
|
@kitebeachakyaka
|
|
</span>
|
|
<h2 className="font-serif text-5xl font-bold text-dark">Instagram</h2>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal stagger className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
|
|
{instagramPosts.map((post: any) => (
|
|
<a
|
|
key={post.id}
|
|
href={`https://instagram.com/p/${post.code}`}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="group block relative rounded-2xl overflow-hidden aspect-[4/5] border border-sand"
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={post.image_versions2?.candidates[0]?.url}
|
|
alt={post.caption?.text?.substring(0, 100) || "Instagram post"}
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
|
/>
|
|
<div className="absolute inset-0 bg-dark/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col items-center justify-center text-white p-6 text-center">
|
|
<Camera className="w-8 h-8 mb-3" />
|
|
<p className="text-xs line-clamp-3">
|
|
{post.caption?.text}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</ScrollReveal>
|
|
|
|
<div className="text-center mt-12">
|
|
<a
|
|
href="https://instagram.com/kitebeachakyaka"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-2 border-2 border-dark text-dark text-xs px-8 py-3.5 rounded-full font-bold uppercase tracking-widest hover:bg-dark hover:text-white transition-colors"
|
|
>
|
|
{lang === "en" ? "Follow Us" : "Bizi Takip Edin"}
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|