Scaffold basic workshop frontend.

2023-12-04 14:02:37 +13:00
parent f7c9392f1c
commit 89ea336647
80 changed files with 27173 additions and 0 deletions
--- a/components/Card.js
+++ b/components/Card.js
@ -0,0 +1,51 @@
+import Image from './Image'
+import Link from './Link'
+
+const Card = ({ title, description, imgSrc, href }) => (
+  <div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
+    <div className="h-full overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700">
+      {href ? (
+        <Link href={href} aria-label={`Link to ${title}`}>
+          <Image
+            alt={title}
+            src={imgSrc}
+            className="object-cover object-center lg:h-48 md:h-36"
+            width={544}
+            height={306}
+          />
+        </Link>
+      ) : (
+        <Image
+          alt={title}
+          src={imgSrc}
+          className="object-cover object-center lg:h-48 md:h-36"
+          width={544}
+          height={306}
+        />
+      )}
+      <div className="p-6">
+        <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
+          {href ? (
+            <Link href={href} aria-label={`Link to ${title}`}>
+              {title}
+            </Link>
+          ) : (
+            title
+          )}
+        </h2>
+        <p className="mb-3 prose text-gray-500 max-w-none dark:text-gray-400">{description}</p>
+        {href && (
+          <Link
+            href={href}
+            className="text-base font-medium leading-6 text-primary-800 hover:text-primary-900 dark:hover:text-primary-400"
+            aria-label={`Link to ${title}`}
+          >
+            Learn more &rarr;
+          </Link>
+        )}
+      </div>
+    </div>
+  </div>
+)
+
+export default Card