242 lines
9.3 KiB
TypeScript
242 lines
9.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import Sidebar from "./sidebar";
|
|
import Image from "next/image";
|
|
import { Link } from '@/i18n/routing';
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
|
|
const BlogPage = () => {
|
|
return (
|
|
<>
|
|
<SiteBreadcrumb />
|
|
<div className="flex flex-wrap gap-5 ">
|
|
<div className="flex-none">
|
|
<div className="lg:max-w-[360px]">
|
|
<Sidebar />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="grid xl:grid-cols-2 grid-cols-1 gap-5">
|
|
<div className="xl:col-span-2 col-span-1">
|
|
<Card className="overflow-hidden">
|
|
<div className=" h-[248px] w-full mb-6 ">
|
|
<Image
|
|
src="/images/all-img/post-1.png"
|
|
alt=""
|
|
width={300}
|
|
height={300}
|
|
className=" w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<CardContent>
|
|
<div className="flex justify-between mb-4">
|
|
<Link href="/blog-details">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:calendar"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
10/02/2021
|
|
</span>
|
|
</Link>
|
|
<div className="flex space-x-4 rtl:space-x-reverse">
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:chat"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
3
|
|
</span>
|
|
</Link>
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:share"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
4
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<h5 className=" text-default-900">
|
|
<Link href="blog-details">
|
|
At Healthcare you will be treated by caring
|
|
</Link>
|
|
</h5>
|
|
<div className="text-default-700 mt-4 space-y-4">
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
|
do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing eli.
|
|
</p>
|
|
<Button variant="outline">Read more</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<Card className="overflow-hidden">
|
|
<div className=" h-[248px] w-full mb-6 ">
|
|
<Image
|
|
src="/images/all-img/post-1.png"
|
|
alt=""
|
|
className=" w-full h-full object-cover"
|
|
width={300}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
<CardContent>
|
|
<div className="flex justify-between mb-4">
|
|
<div>
|
|
<h5 className=" text-default-900">
|
|
<Link href="#">Lorem ipsum</Link>
|
|
</h5>
|
|
</div>
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:calendar"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
10/02/2021
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-default-700 mt-4">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
<div className="mt-4 space-x-4 rtl:space-x-reverse">
|
|
<Link href="#" className="text-sm font-medium underline">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="overflow-hidden">
|
|
<div className=" h-[248px] w-full mb-6 ">
|
|
<Image
|
|
src="/images/all-img/post-1.png"
|
|
alt=""
|
|
className=" w-full h-full object-cover"
|
|
width={300}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
<CardContent>
|
|
<div className="flex justify-between mb-4">
|
|
<div>
|
|
<h5 className=" text-default-900">
|
|
<Link href="#">Lorem ipsum</Link>
|
|
</h5>
|
|
</div>
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:calendar"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
10/02/2021
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-default-700 mt-4">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
<div className="mt-4 space-x-4 rtl:space-x-reverse">
|
|
<Link href="#" className="text-sm font-medium underline">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="overflow-hidden">
|
|
<div className=" h-[248px] w-full mb-6 ">
|
|
<Image
|
|
src="/images/all-img/post-1.png"
|
|
alt=""
|
|
className=" w-full h-full object-cover"
|
|
width={300}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
<CardContent>
|
|
<div className="flex justify-between mb-4">
|
|
<div>
|
|
<h5 className=" text-default-900">
|
|
<Link href="#">Lorem ipsum</Link>
|
|
</h5>
|
|
</div>
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:calendar"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
10/02/2021
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-default-700 mt-4">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
<div className="mt-4 space-x-4 rtl:space-x-reverse">
|
|
<Link href="#" className="text-sm font-medium underline">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="overflow-hidden">
|
|
<div className=" h-[248px] w-full mb-6 ">
|
|
<Image
|
|
src="/images/all-img/post-1.png"
|
|
alt=""
|
|
className=" w-full h-full object-cover"
|
|
width={300}
|
|
height={300}
|
|
/>
|
|
</div>
|
|
<CardContent>
|
|
<div className="flex justify-between mb-4">
|
|
<div>
|
|
<h5 className=" text-default-900">
|
|
<Link href="#">Lorem ipsum</Link>
|
|
</h5>
|
|
</div>
|
|
<Link href="#">
|
|
<span className="inline-flex leading-5 text-default-500 text-sm font-normal">
|
|
<Icon
|
|
icon="heroicons-outline:calendar"
|
|
className="text-default-400 me-2 text-lg"
|
|
/>
|
|
10/02/2021
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="text-default-700 mt-4">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
|
|
<div className="mt-4 space-x-4 rtl:space-x-reverse">
|
|
<Link href="#" className="text-sm font-medium underline">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default BlogPage;
|