blog-cards

"use client";
import React from "react";
import { Card } from '@/components/ui/card'
import Image from "next/image";
import { TbPoint } from "react-icons/tb";
import { Icon } from "@iconify/react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";

const BlogCardsData = [
  {
    avatar: "/images/profile/user-6.jpg",
    coveravatar: "/images/blog/blog-img1.jpg",
    read: "2 min Read",
    title: "As yen tumbles, gadget-loving Japan goes for secondhand iPhones",
    category: "Social",
    name: "Georgeanna Ramero",
    view: "9,125",
    comments: "3",
    time: "Mon, Dec 19",
    url: ''
  },
  {
    avatar: "/images/profile/user-2.jpg",
    coveravatar: "/images/blog/blog-img2.jpg",
    read: "2 min Read",
    title:
      "Intel loses bid to revive antitrust case against patent foe Fortress",
    category: "Gadget",
    name: "Georgeanna Ramero",
    view: "4,150",
    comments: "38",
    time: "Sun, Dec 18",
    url: ''
  },
  {
    avatar: "/images/profile/user-3.jpg",
    coveravatar: "/images/blog/blog-img3.jpg",
    read: "2 min Read",
    title: "COVID outbreak deepens as more lockdowns loom in China",
    category: "Health",
    name: "Georgeanna Ramero",
    view: "9,480",
    comments: "12",
    time: "Sat, Dec 17",
    url: ''
  },
];

const BlogCardsCode = () => {
  return (
    <>
      <div className="grid grid-cols-12 gap-6 mt-[30px]">
        {BlogCardsData.map((item, i) => (
          <div className="lg:col-span-4 col-span-12" key={i}>
            <Link href={item.url} className="group">
              <Card className="p-0 overflow-hidden ">
                <div className="relative">
                  <Image src={item.coveravatar} alt="tailwindadmin" width={400} height={250} />
                  <Badge
                    variant={"white"}
                    className="absolute bottom-5 end-5 rounded-md font-semibold"
                  >
                    {item.read}
                  </Badge>
                </div>
                <div className="px-6 pb-6">
                  <Image
                    src={item.avatar}
                    className="h-10 w-10 rounded-full -mt-7 relative z-1"
                    alt="user"
                    width={40}
                    height={40}
                  />
                  <Badge variant={"white"} className="mt-6 rounded-md">
                    {item.category}
                  </Badge>
                  <p className="text-lg my-6 text-inherit group-hover:text-primary line-clamp-2">{item.title}</p>
                  <div className="flex">
                    <div className="flex gap-2 me-6 items-center">
                      <Icon icon="tabler:eye" height={18} className="text-ld" />
                      <span className="text-sm text-darklink">{item.view}</span>
                    </div>
                    <div className="flex gap-2 items-center">
                      <Icon icon="tabler:message-2" height={18} className="text-ld" />
                      <span className="text-sm text-darklink">{item.view}</span>
                    </div>
                    <div className="flex gap-1 items-center ms-auto">
                      <TbPoint
                        size={15}
                        className="text-ld"
                      />{" "}
                      <span className="text-sm text-darklink">{item.time}</span>
                    </div>
                  </div>
                </div>
              </Card>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
};

export default BlogCardsCode;