"use client"; import Image from "next/image"; import Link from "next/link"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { Twitter, ChevronLeft, ChevronRight, MessageCircle, Repeat2, Heart, ExternalLink, VerifiedIcon, } from "lucide-react"; import { Carousel, CarouselContent, CarouselItem, type CarouselApi, } from "@/components/ui/carousel"; import { useState } from "react"; // Sample tweets data const tweets = [ { id: "1", user: { name: "Alex Morgan", handle: "@alexmdev", avatar: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170&auto=format&fit=crop", verified: true, }, content: "Just launched my new portfolio website built with Next.js and Tailwind CSS! Check it out and let me know what you think. #webdev #frontend #portfoliowebsite", date: "2h ago", metrics: { replies: 12, retweets: 24, likes: 89, }, url: "#", }, { id: "2", user: { name: "Sarah Johnson", handle: "@sarahj_ux", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1287&auto=format&fit=crop", verified: true, }, content: "Had the pleasure of working with @alexmdev on our company's website redesign. His technical skills and eye for design are exceptional! Highly recommend for any web development project. 💯", date: "1d ago", metrics: { replies: 3, retweets: 15, likes: 67, }, url: "#", }, { id: "3", user: { name: "Tech Insights", handle: "@techinsights", avatar: "https://images.unsplash.com/photo-1628155930542-3c7a64e2c833?q=80&w=1074&auto=format&fit=crop", verified: true, }, content: "We interviewed @alexmdev about his approach to modern web development in our latest podcast episode. Great insights on balancing performance and aesthetics! Listen now: techinsights.com/podcast/ep45", date: "3d ago", metrics: { replies: 18, retweets: 42, likes: 136, }, url: "#", }, { id: "4", user: { name: "Alex Morgan", handle: "@alexmdev", avatar: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=1170&auto=format&fit=crop", verified: true, }, content: "Excited to announce that I'm joining @innovatetech as a Senior Frontend Developer next month! Looking forward to building amazing web experiences with this talented team. #careerchange #frontenddeveloper", date: "5d ago", metrics: { replies: 32, retweets: 18, likes: 215, }, url: "#", }, { id: "5", user: { name: "WebDevConf", handle: "@webdevconf", avatar: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?q=80&w=1170&auto=format&fit=crop", verified: true, }, content: "Thank you @alexmdev for your insightful presentation on 'Building Accessible Web Applications' at #WebDevConf2023! Attendees loved the practical demonstrations and code examples.", date: "1w ago", metrics: { replies: 8, retweets: 27, likes: 103, }, url: "#", }, { id: "6", user: { name: "CodeMentor", handle: "@codementor", avatar: "https://images.unsplash.com/photo-1521119989659-a83eee488004?q=80&w=1123&auto=format&fit=crop", verified: false, }, content: "Our latest 'Developer Spotlight' features @alexmdev and his journey from self-taught programmer to senior developer. Read about his learning strategies and career tips: codementor.io/spotlight/alex-morgan", date: "2w ago", metrics: { replies: 5, retweets: 14, likes: 76, }, url: "#", }, ]; export default function TweetCarousel() { const [api, setApi] = useState(); return (

Twitter

Latest Tweets

Stay updated with my latest thoughts and interactions in the tech community

{/* Tweet Carousel with Navigation */}

{tweets.map((tweet) => ( {/* Tweet Header */}

{tweet.user.name} {tweet.user.verified && ( )}

{tweet.user.handle}

{/* Tweet Content */}

{tweet.content}

{/* Tweet Date and Metrics */}

{tweet.date}

{tweet.metrics.replies}

{tweet.metrics.retweets}

{tweet.metrics.likes}

))}

{/* Footer with Mobile Navigation and Link */}

); }

Portfolio Social Media Embeds

Tweet Carousel

Highlighted PostPreview

Instagram GridPreview

Social Icons FeedPreview

Youtube Video StripPreview