refactor: add card component

timlrx · Feb 14, 2021 · e91e693 · e91e693 · vercel · Feb 14, 2021
1 parent 8b3d38c
commit e91e693
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 32 deletions.
diff --git a/components/Card.js b/components/Card.js
@@ -0,0 +1,51 @@
+import Image from 'next/image'
+import Link from '@/components/Link'
+
+const Card = ({ title, description, imgSrc, href }) => (
+  <div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
+    <div className="h-full border-2 border-gray-200 border-opacity-60 dark:border-gray-700 rounded-md overflow-hidden">
+      {href ? (
+        <Link href={href} aria-label={`Link to ${title}`}>
+          <Image
+            alt={title}
+            src={imgSrc}
+            className="lg:h-48 md:h-36 object-cover object-center"
+            width={544}
+            height={306}
+          />
+        </Link>
+      ) : (
+        <Image
+          alt={title}
+          src={imgSrc}
+          className="lg:h-48 md:h-36 object-cover object-center"
+          width={544}
+          height={306}
+        />
+      )}
+      <div className="p-6">
+        <h2 className="text-2xl font-bold leading-8 tracking-tight mb-3">
+          {href ? (
+            <Link href={href} aria-label={`Link to ${title}`}>
+              {title}
+            </Link>
+          ) : (
+            title
+          )}
+        </h2>
+        <p className="prose text-gray-500 max-w-none dark:text-gray-400 mb-3">{description}</p>
+        {href && (
+          <Link
+            href={href}
+            className="text-base font-medium leading-6 text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
+            aria-label={`Link to ${title}`}
+          >
+            Learn more &rarr;
+          </Link>
+        )}
+      </div>
+    </div>
+  </div>
+)
+
+export default Card
diff --git a/pages/projects.js b/pages/projects.js
@@ -2,6 +2,7 @@ import Image from 'next/image'
 import siteMetadata from '@/data/siteMetadata'
 import projectsData from '@/data/projectsData'
 import Link from '@/components/Link'
+import Card from '@/components/Card'
 import { PageSeo } from '@/components/SEO'
 
 export default function Projects() {
@@ -24,38 +25,13 @@ export default function Projects() {
         <div className="container py-12">
           <div className="flex flex-wrap -m-4">
             {projectsData.map((d) => (
-              <div className="p-4 md:w-1/2" key={d.title}>
-                <div className="h-full border-2 border-gray-200 border-opacity-60 dark:border-gray-700 rounded-md overflow-hidden">
-                  <Link href={d.href} aria-label={`Link to ${d.title}`}>
-                    <Image
-                      alt={d.title}
-                      src={d.imgSrc}
-                      className="lg:h-48 md:h-36 object-cover object-center"
-                      width={721}
-                      height={401}
-                    />
-                  </Link>
-                  <div className="p-6">
-                    <h2 className="text-2xl font-bold leading-8 tracking-tight mb-3">
-                      <Link href={d.href} aria-label={`Link to ${d.title}`}>
-                        {d.title}
-                      </Link>
-                    </h2>
-                    <p className="prose text-gray-500 max-w-none dark:text-gray-400 mb-3">
-                      {d.description}
-                    </p>
-                    <div className="text-base font-medium leading-6">
-                      <Link
-                        href={d.href}
-                        className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
-                        aria-label={`Link to ${d.title}`}
-                      >
-                        Learn more &rarr;
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <Card
+                key={d.title}
+                title={d.title}
+                description={d.description}
+                imgSrc={d.imgSrc}
+                href={d.href}
+              />
             ))}
           </div>
         </div>