134 lines
5.2 KiB
TypeScript
134 lines
5.2 KiB
TypeScript
import React from "react";
|
|
import Link from "next/link";
|
|
import {
|
|
Search,
|
|
FileText,
|
|
User,
|
|
MessageCircle,
|
|
Calendar,
|
|
ArrowRight,
|
|
} from "lucide-react";
|
|
|
|
const popularPosts = [
|
|
{
|
|
title: "How Wireless Technology is Changing Business",
|
|
date: "May 15, 2020",
|
|
image:
|
|
"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=80&h=80&q=60&auto=format&fit=crop",
|
|
},
|
|
{
|
|
title: "How Wireless Technology is Changing Business",
|
|
date: "May 15, 2020",
|
|
image:
|
|
"https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=80&h=80&q=60&auto=format&fit=crop",
|
|
},
|
|
{
|
|
title: "How Wireless Technology is Changing Business",
|
|
date: "May 15, 2020",
|
|
image:
|
|
"https://images.unsplash.com/photo-1503342452485-86f7f3f45e2b?w=80&h=80&q=60&auto=format&fit=crop",
|
|
},
|
|
];
|
|
|
|
export default function BlogContent() {
|
|
return (
|
|
<section className="container mx-auto px-4 py-10 lg:py-12">
|
|
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
|
{/* Main: Featured article */}
|
|
<article className="lg:col-span-2">
|
|
<div className="overflow-hidden rounded-xl bg-white shadow-sm dark:bg-neutral-900 dark:shadow-none">
|
|
<div className="relative aspect-[2/1] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-800">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=400&q=80&auto=format&fit=crop"
|
|
alt="How to become a successful businessman"
|
|
className="h-full w-full object-cover"
|
|
width={800}
|
|
height={400}
|
|
/>
|
|
<div className="absolute left-4 top-4 rounded-md bg-violet-600/90 px-3 py-1.5 text-sm font-medium text-white">
|
|
08 Aug
|
|
</div>
|
|
</div>
|
|
<div className="p-6">
|
|
<div className="mb-3 flex flex-wrap items-center gap-x-5 gap-y-1 text-sm text-neutral-500 dark:text-neutral-400">
|
|
<span className="flex items-center gap-1.5">
|
|
<FileText className="size-4" />
|
|
Technology / Business
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<User className="size-4" />
|
|
Andrew Paker
|
|
</span>
|
|
<span className="flex items-center gap-1.5">
|
|
<MessageCircle className="size-4" />
|
|
0 Comments
|
|
</span>
|
|
</div>
|
|
<h2 className="mb-3 text-2xl font-bold text-neutral-900 dark:text-white lg:text-3xl">
|
|
How to become a successful businessman
|
|
</h2>
|
|
<p className="mb-4 text-neutral-600 dark:text-neutral-300">
|
|
Accelerate innovation with world-class tech teams We'll match
|
|
you to an entire remote team of incredible freelance talent for
|
|
all your software development needs.
|
|
</p>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex items-center gap-1.5 text-sm font-semibold text-neutral-900 hover:text-violet-600 dark:text-white dark:hover:text-violet-400"
|
|
>
|
|
READ FULL
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
{/* Sidebar */}
|
|
<aside className="space-y-6">
|
|
<div className="rounded-xl bg-white p-4 shadow-sm dark:bg-neutral-900 dark:shadow-none">
|
|
<div className="flex items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-2.5 dark:border-neutral-700 dark:bg-neutral-800">
|
|
<Search className="size-4 shrink-0 text-neutral-500" />
|
|
<input
|
|
type="search"
|
|
placeholder="Write your keyword..."
|
|
className="w-full bg-transparent text-sm outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-xl bg-white p-5 shadow-sm dark:bg-neutral-900 dark:shadow-none">
|
|
<h3 className="mb-4 font-bold text-neutral-900 dark:text-white">
|
|
Popular Posts
|
|
</h3>
|
|
<ul className="space-y-4">
|
|
{popularPosts.map((post, i) => (
|
|
<li key={i}>
|
|
<Link
|
|
href="#"
|
|
className="flex gap-3 transition-opacity hover:opacity-80"
|
|
>
|
|
<img
|
|
src={post.image}
|
|
alt=""
|
|
className="h-14 w-14 shrink-0 rounded-full object-cover"
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium leading-snug text-neutral-900 dark:text-white">
|
|
{post.title}
|
|
</p>
|
|
<p className="mt-1 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400">
|
|
<Calendar className="size-3.5" />
|
|
{post.date}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|