// /src/app/page.tsx import React, { useEffect, useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { formatDistanceToNow } from "date-fns"; import { motion } from "framer-motion"; interface Post { id: string; platform: string; timestamp: string; content: string; link: string; media?: string; } export default function SocialMediaHub() { const [posts, setPosts] = useState([]); const [filteredPlatform, setFilteredPlatform] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetch("/api/social-feed") .then((res) => res.json()) .then((data) => { const sorted = data.sort( (a: Post, b: Post) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime() ); setPosts(sorted); }) .finally(() => setLoading(false)); }, []); const platforms = Array.from(new Set(posts.map((p) => p.platform))); const visiblePosts = filteredPlatform ? posts.filter((p) => p.platform === filteredPlatform) : posts; if (loading) return

; return (

setFilteredPlatform(null)} > All{platforms.map((platform) => (setFilteredPlatform(platform)} > {platform} ))}

{visiblePosts.map((post) => (

{post.platform.toUpperCase()} • {formatDistanceToNow(new Date(post.timestamp))} ago

{post.content}

{post.media && ( )} View Original Post → ))}

); } // /src/pages/api/social-feed.ts import type { NextApiRequest, NextApiResponse } from 'next'; // TODO: Replace with actual API integration using OAuth for each platform. // Twitter API v2: https://developer.twitter.com/en/docs/twitter-api // Facebook Graph API: https://developers.facebook.com/docs/graph-api // LinkedIn API: https://learn.microsoft.com/en-us/linkedin/marketing/integrations/community-management const mockData = [ { id: '1', platform: 'twitter', timestamp: new Date().toISOString(), content: 'Exciting update from @riceengineering!', link: 'https://twitter.com/riceengineering/status/123', media: 'https://via.placeholder.com/400x200' }, { id: '2', platform: 'facebook', timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(), content: 'Rice CS just published a new article!', link: 'https://facebook.com/RiceCS/posts/456', media: 'https://via.placeholder.com/400x200' }, { id: '3', platform: 'linkedin', timestamp: new Date(Date.now() - 1000 * 60 * 120).toISOString(), content: 'Read about our latest bioengineering research.', link: 'https://linkedin.com/company/ricebioe/posts/789' } ]; export default async function handler(req: NextApiRequest, res: NextApiResponse) { res.status(200).json(mockData); }