33 lines
846 B
TypeScript
33 lines
846 B
TypeScript
'use client';
|
|
import { InstagramPost, fetchInstagramPosts } from '@/lib/instagram';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export function InstagramFeed() {
|
|
const [posts, setPosts] = useState<InstagramPost[]>([]);
|
|
|
|
useEffect(() => {
|
|
async function getInstagramData() {
|
|
const data = await fetchInstagramPosts();
|
|
setPosts(data);
|
|
}
|
|
|
|
getInstagramData();
|
|
}, []);
|
|
|
|
return (
|
|
<div className='grid grid-cols-1 md:grid-cols-5 gap-8'>
|
|
{posts.map((post) => (
|
|
<div key={post.id} className='flex flex-col items-center'>
|
|
<a href={post.permalink} target='_blank' rel='noopener noreferrer'>
|
|
<img
|
|
src={post.media_url}
|
|
alt={post.caption}
|
|
className='rounded-lg shadow-lg'
|
|
/>
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|