feat: create wireframed quest list

bleu · Oct 1, 2024 · 1de3044 · 1de3044
1 parent 0a63a37
commit 1de3044
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/apps/govquests-frontend/src/app/layout.tsx b/apps/govquests-frontend/src/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
           <div />
         </header>
         <div className="flex">
-          <aside className="w-32 bg-red-100 min-h-screen p-6">
+          <aside className="w-32 bg-red-100 min-h-screen p-6 hidden md:flex">
             <div />
           </aside>
           {children}

diff --git a/apps/govquests-frontend/src/app/page.tsx b/apps/govquests-frontend/src/app/page.tsx
@@ -32,7 +32,7 @@ export default function Home() {
       <span className="text-lg bg-green mb-4">
         We selected them based on your profile
       </span>
-      <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
+      <div className="mt-6 grid grid-cols-2 md:grid-cols-5 gap-5">
         {quests.map((quest) => (
           <Quest
             key={quest.title}

diff --git a/apps/govquests-frontend/src/components/Quest.tsx b/apps/govquests-frontend/src/components/Quest.tsx
@@ -19,14 +19,16 @@ const Quest: React.FC<QuestProps> = ({
   onStart,
 }) => {
   return (
-    <div className="flex flex-col items-center">
-      <Image src={imageSrc} alt={altText} width={100} height={100} />
-      <h3>{title}</h3>
-      <div className="flex flex-col items-center">
-        <span>
+    <div className="flex flex-col bg-red-300 rounded-lg">
+      <div className="relative w-full border border-black h-36">
+        <Image src={imageSrc} alt={altText} layout="fill" objectFit="cover" />
+      </div>
+      <div className="flex flex-col p-4">
+        <h3>{title}</h3>
+        <span className="bg-white self-start py-1 px-2 mt-1 mb-5 rounded text-sm">
           {points} {rewardType}
         </span>
-        <button type="button" onClick={onStart}>
+        <button type="button" onClick={onStart} className="bg-white rounded-lg">
           Start
         </button>
       </div>