feat: add card component for projects

moonbamijam · Feb 22, 2024 · 7b6af74 · 7b6af74
1 parent 597933e
commit 7b6af74
Showing 1 changed file with 37 additions and 28 deletions.
diff --git a/components/ui/ProjectCard.tsx b/components/ui/ProjectCard.tsx
@@ -1,9 +1,9 @@
 import { ProjectType } from "@shared-types/project";
-import { Url } from "next/dist/shared/lib/router/router";
 import Image from "next/image";
 import Link from "next/link";
 
 const ProjectCard = ({
+  href,
   src,
   alt,
   title,
@@ -12,36 +12,45 @@ const ProjectCard = ({
   github,
 }: ProjectType) => {
   return (
-    <div className="content rounded-xl flex flex-col gap-[30px]">
-      <Image
-        src={`${src}`}
-        alt={`${alt}`}
-        width={800}
-        height={400}
-        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        className="w-[300px] h-[150px] object-cover"
-      />
-      <div className="details px-[30px]">
-        <h1 className="title text-2xl px-2">{title}</h1>
-        <p className="desc h-[50px] paragraph-format">{desc}</p>
-      </div>
-      <div className="links">
-        {website ? <ProjectLink href={website} text={"Visit"} /> : <></>}
-        <ProjectLink href={github} text={"GitHub"} />
+    <div className="card relative w-[400px] rounded-xl flex flex-col bg-transparent overflow-hidden">
+      <Link href={href}>
+        <Image
+          src={`${src}`}
+          alt={`${alt}`}
+          width={720}
+          height={1080}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          className="w-full h-[200px] object-cover"
+        />
+        <div className="details px-[30px] py-[30px]">
+          <h1 className="title text-2xl font-bold px-2">{title}</h1>
+          <p className="desc desc-format">{desc}</p>
+        </div>
+      </Link>
+      <div className="links flex justify-between px-[30px] pb-[30px]">
+        <Link
+          href={github}
+          target="_blank"
+          className={`${
+            !website ? "mr-auto" : ""
+          } hover:text-white button-format border border-[#24292e] dark:border-azure dark:hover:border-[#2dba4e] hover:border-[#2dba4e] hover:bg-[#2dba4e] dark:hover:bg-[#2dba4e] capitalize`}
+        >
+          GitHub
+        </Link>
+        {website ? (
+          <Link
+            href={website}
+            target="_blank"
+            className="text-white button-format bg-gray-500 hover:bg-azure capitalize"
+          >
+            visit
+          </Link>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );
 };
 
-type ProjectLinkProps = {
-  href: Url;
-  text: string;
-};
-
-const ProjectLink = ({href, text}: ProjectLinkProps) => {
-  return (
-    <Link href={href} className="text-sm lg:text-base w-[150px] h-[50px] rounded-lg bg-white">{text}</Link>
-  )
-};
-
 export default ProjectCard;