import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import {
CalendarIcon,
Clock3Icon,
ArrowRightIcon,
ChevronDown,
} from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useState } from 'react';
// Define types
interface Author {
name: string;
role: string;
avatar: string;
}
interface FeaturedPost {
id: number;
title: string;
excerpt: string;
category: string;
date: string;
readTime: string;
author: Author;
imageUrl: string;
}
interface SidebarPostType {
id: number;
title: string;
category: string;
date: string;
imageUrl: string;
}
const featuredPost: FeaturedPost = {
id: 1,
title: '5 Marketing Automation Trends That Will Define the Industry',
excerpt:
'Discover how AI, personalization, and cross-channel integration are transforming marketing automation and what this means for your business strategy.',
category: 'Automation',
date: 'April 2, 2023',
readTime: '12 min read',
author: {
name: 'Sophia Martinez',
role: 'Marketing Director',
avatar:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=256&q=80',
},
imageUrl:
'https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
};
const popularPosts: SidebarPostType[] = [
{
id: 1,
title: 'The Complete Guide to SEO in 2023',
category: 'SEO',
date: 'March 25, 2023',
imageUrl:
'https://images.unsplash.com/photo-1562577309-4932fdd64cd1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
{
id: 2,
title: '10 B2B Marketing Strategies That Actually Work',
category: 'B2B',
date: 'March 20, 2023',
imageUrl:
'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
{
id: 3,
title: 'How to Create a Content Calendar That Drives Results',
category: 'Content',
date: 'March 18, 2023',
imageUrl:
'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
];
const recentPosts: SidebarPostType[] = [
{
id: 1,
title: 'Marketing Attribution Models Explained',
category: 'Analytics',
date: 'April 1, 2023',
imageUrl:
'https://images.unsplash.com/photo-1599658880436-c61792e70672?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
{
id: 2,
title: 'Creating Viral Social Media Campaigns',
category: 'Social Media',
date: 'March 30, 2023',
imageUrl:
'https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
{
id: 3,
title: 'How to Optimize Your Landing Pages for Conversion',
category: 'Conversion',
date: 'March 27, 2023',
imageUrl:
'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80',
},
];
export default function BlogSectionFeaturedWithSidebar() {
const [tabValue, setTabValue] = useState('popular');
// Get posts based on selected tab
const currentPosts = tabValue === 'popular' ? popularPosts : recentPosts;
return (
<section className="container mx-auto px-4 py-24 md:px-6 2xl:max-w-[1400px]">
<div className="mb-12 space-y-4 text-center">
<h2 className="text-3xl font-bold tracking-tight">Marketing Blog</h2>
<p className="text-muted-foreground mx-auto max-w-2xl">
Stay updated with the latest trends, strategies, and insights in the
marketing world.
</p>
</div>
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
{/* Featured Post - Takes up 2/3 of the space on desktop */}
<div className="space-y-6 lg:col-span-2">
<div className="relative aspect-video overflow-hidden rounded-lg">
<img
src={featuredPost.imageUrl}
alt={featuredPost.title}
className="object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div className="absolute bottom-0 p-6 text-white">
<Badge className="bg-primary hover:bg-primary/90 mb-3">
{featuredPost.category}
</Badge>
<h3 className="mb-2 text-2xl font-bold md:text-3xl">
{featuredPost.title}
</h3>
<div className="flex items-center gap-2 text-sm">
<CalendarIcon className="h-3 w-3" />
<span>{featuredPost.date}</span>
<Clock3Icon className="ml-3 h-3 w-3" />
<span>{featuredPost.readTime}</span>
</div>
</div>
</div>
<div className="space-y-5">
<div className="flex items-center gap-3">
<div className="relative h-10 w-10 overflow-hidden rounded-full">
<img
src={featuredPost.author.avatar}
alt={featuredPost.author.name}
className="object-cover"
/>
</div>
<div>
<p className="font-medium">{featuredPost.author.name}</p>
<p className="text-muted-foreground text-sm">
{featuredPost.author.role}
</p>
</div>
</div>
<p className="text-muted-foreground">{featuredPost.excerpt}</p>
<Button asChild>
<a href="#">Read Full Article</a>
</Button>
</div>
</div>
{/* Sidebar */}
<div className="space-y-8">
{/* Tabs for larger screens, dropdown for mobile */}
<div className="hidden md:block">
<Tabs defaultValue="popular" onValueChange={setTabValue}>
<div className="mb-5 flex items-center justify-between border-b">
<TabsList className="h-auto bg-transparent p-0">
<TabsTrigger
value="popular"
className="data-[state=active]:border-primary h-10 rounded-none px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:shadow-none"
>
Popular
</TabsTrigger>
<TabsTrigger
value="recent"
className="data-[state=active]:border-primary h-10 rounded-none px-4 py-2 data-[state=active]:border-b-2 data-[state=active]:shadow-none"
>
Recent
</TabsTrigger>
</TabsList>
</div>
<TabsContent value="popular" className="mt-0 flex flex-col gap-2">
{popularPosts.map((post) => (
<SidebarPost key={post.id} post={post} />
))}
<Button variant="link" className="pl-0" asChild>
<a href="#">
See all popular posts{' '}
<ArrowRightIcon className="ml-1 h-4 w-4" />
</a>
</Button>
</TabsContent>
<TabsContent value="recent" className="mt-0 flex flex-col gap-2">
{recentPosts.map((post) => (
<SidebarPost key={post.id} post={post} />
))}
<Button variant="link" className="pl-0" asChild>
<a href="#">
See all recent posts{' '}
<ArrowRightIcon className="ml-1 h-4 w-4" />
</a>
</Button>
</TabsContent>
</Tabs>
</div>
{/* Dropdown menu for small screens */}
<div className="md:hidden">
<div className="mb-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="flex w-full justify-between"
>
{tabValue === 'popular' ? 'Popular Posts' : 'Recent Posts'}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-full">
<DropdownMenuItem onClick={() => setTabValue('popular')}>
Popular Posts
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTabValue('recent')}>
Recent Posts
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="flex flex-col gap-2">
{currentPosts.map((post) => (
<SidebarPost key={post.id} post={post} />
))}
<Button variant="link" className="pl-0" asChild>
<a href="#">
{tabValue === 'popular'
? 'See all popular posts'
: 'See all recent posts'}{' '}
<ArrowRightIcon className="ml-1 h-4 w-4" />
</a>
</Button>
</div>
</div>
</div>
</div>
</section>
);
}
function SidebarPost({ post }: { post: SidebarPostType }) {
return (
<a href="#" className="group">
<Card className="overflow-hidden p-0">
<CardContent className="flex p-0">
<div className="relative aspect-[4/3] w-1/3">
<img
src={post.imageUrl}
alt={post.title}
className="object-cover transition-transform duration-300 group-hover:scale-105"
/>
</div>
<div className="w-2/3 p-4">
<Badge variant="outline" className="mb-2 text-xs">
{post.category}
</Badge>
<h4 className="group-hover:text-primary line-clamp-2 font-medium transition-colors">
{post.title}
</h4>
<div className="text-muted-foreground mt-2 flex items-center text-xs">
<CalendarIcon className="mr-1 h-3 w-3" />
<span>{post.date}</span>
</div>
</div>
</CardContent>
</Card>
</a>
);
}