105 lines
4.4 KiB
TypeScript
105 lines
4.4 KiB
TypeScript
import { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Blog',
|
|
};
|
|
|
|
const blogs = [
|
|
{
|
|
id: 1,
|
|
image: '/assets/images/blog/image-1.jpg',
|
|
title: 'Excessive sugar is harmful',
|
|
description: 'Sugar consumption can have serious effects on your health if taken in excess. Learn how to reduce it.',
|
|
author: 'Alma Clark',
|
|
profile: '/assets/images/profile-1.jpeg',
|
|
date: '06 May',
|
|
slug: '/blog/1',
|
|
},
|
|
{
|
|
id: 2,
|
|
image: '/assets/images/blog/image-1.jpg',
|
|
title: 'Creative Photography',
|
|
description: 'Photography is not just about capturing pictures, but emotions and stories through your lens.',
|
|
author: 'Alma Clark',
|
|
profile: '/assets/images/profile-2.jpeg',
|
|
date: '06 May',
|
|
slug: '/blog/2',
|
|
},
|
|
{
|
|
id: 3,
|
|
image: '/assets/images/blog/image-1.jpg',
|
|
title: 'Plan your next trip',
|
|
description: 'Traveling helps you explore new cultures, food, and make memories that last a lifetime.',
|
|
author: 'Alma Clark',
|
|
profile: '/assets/images/profile-3.jpeg',
|
|
date: '06 May',
|
|
slug: '/blog/3',
|
|
},
|
|
{
|
|
id: 4,
|
|
image: '/assets/images/blog/image-1.jpg',
|
|
title: 'My latest Vlog',
|
|
description: 'Check out my latest vlog where I share behind-the-scenes of my daily life and adventures.',
|
|
author: 'Alma Clark',
|
|
profile: '/assets/images/profile-4.jpeg',
|
|
date: '06 May',
|
|
slug: '/blog/4',
|
|
},
|
|
];
|
|
|
|
const Blog = () => {
|
|
return (
|
|
<div className="mt-10">
|
|
<h3 className="mb-6 text-xl font-bold md:text-3xl">Blogs</h3>
|
|
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
|
|
{/* ✅ First box: Create New Blog */}
|
|
<Link href="/create-blog" className="flex items-center justify-center space-y-5 rounded-md border border-dashed border-blue-500 bg-blue-50 p-5 text-center shadow hover:bg-blue-100 transition dark:border-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
|
|
<div>
|
|
<div className="mb-3 text-5xl text-blue-600 dark:text-white">+</div>
|
|
<h5 className="text-lg font-semibold text-blue-800 dark:text-white">Create New Blog</h5>
|
|
</div>
|
|
</Link>
|
|
{blogs.map((blog) => (
|
|
<div
|
|
key={blog.id}
|
|
className="space-y-4 rounded-md border border-white-light bg-white p-5 shadow-[0px_0px_2px_0px_rgba(145,158,171,0.20),0px_12px_24px_-4px_rgba(145,158,171,0.12)] dark:border-[#1B2E4B] dark:bg-black"
|
|
>
|
|
<div className="max-h-56 overflow-hidden rounded-md">
|
|
<img src={blog.image} alt={blog.title} className="w-full object-cover" />
|
|
</div>
|
|
|
|
{/* ✅ Description first, then Title */}
|
|
<h5 className="text-lg font-semibold dark:text-white">{blog.title}</h5>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">{blog.description}</p>
|
|
|
|
{/*
|
|
<div className="flex items-center">
|
|
<div className="me-4 overflow-hidden rounded-full bg-white-dark">
|
|
<img src={blog.profile} className="h-11 w-11 object-cover" alt={blog.author} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h4 className="mb-1.5 font-semibold dark:text-white">{blog.author}</h4>
|
|
<p className="text-xs text-gray-500">{blog.date}</p>
|
|
</div>
|
|
</div> */}
|
|
|
|
{/* ✅ Read More button */}
|
|
<div>
|
|
<Link
|
|
href={blog.slug}
|
|
className="inline-block mt-3 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
|
|
>
|
|
Read More
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Blog;
|