update: setup layouts and basic ui

src/components/test/Card.tsx

@@ -0,0 +1,21 @@
+interface CardProps {
+  url: string
+  title: string
+  description: string
+}
+
+export const Card: React.FC<CardProps> = ({
+  url,
+  title,
+  description,
+}: CardProps) => (
+  <a
+    href={url}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="max-w-xs p-6 m-4 text-left transition-colors border border-gray-200 rounded-xl text-inherit hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
+  >
+    <h2 className="mb-4 text-2xl">{title} &rarr;</h2>
+    <p className="m-0 text-xl">{description}</p>
+  </a>
+)

src/components/test/CardButton.tsx

@@ -0,0 +1,20 @@
+interface CardButtonProps {
+  onClick: () => void
+  title: string
+  description: string
+}
+
+export const CardButton: React.FC<CardButtonProps> = ({
+  onClick,
+  title,
+  description,
+}: CardButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="m-4 max-w-xs rounded-xl border border-gray-200 p-6 text-left text-inherit transition-colors hover:border-blue-600 hover:text-blue-600 focus:border-blue-600 focus:text-blue-600 active:border-blue-600 active:text-blue-600"
+  >
+    <h2 className="mb-4 text-2xl">{title} &rarr;</h2>
+    <p className="m-0 text-xl">{description}</p>
+  </button>
+)