Insta, spotlight, fonts

src/components/instagram.tsx

@@ -0,0 +1,32 @@
+'use client';
+import { InstagramPost, fetchInstagramPosts } from '@/app/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>
+  );
+}