[feat] view plants: created PlantCard component (#4)

Co-authored-by: Catherine Tan <[email protected]>

api/supabase/queries/plants.ts

@@ -1,3 +1,4 @@
+import { UUID } from 'crypto';
 import { Plant } from '@/types/schema';
 import supabase from '../createClient';
 
@@ -6,3 +7,15 @@ export async function getAllPlants(): Promise<Plant[]> {
   if (error) throw new Error(`Error fetching all plants: ${error.message}`);
   return data;
 }
+
+export async function getPlantById(plantId: UUID): Promise<Plant> {
+  const { data, error } = await supabase
+    .from('plants')
+    .select('*')
+    .eq('id', plantId);
+  if (error) {
+    throw new Error(`Error getting matching plant: ${error.message}`);
+  }
+
+  return data[0];
+}

app/view-plants/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { UUID } from 'crypto';
+import { getPlantById } from '@/api/supabase/queries/plants';
+import PlantCard from '@/components/PlantCard/PlantCard';
+import { Plant } from '@/types/schema';
+
+export default function Home() {
+  const [result, setResult] = useState<Plant>();
+  useEffect(() => {
+    const getData = async () => {
+      const testUUID: UUID = '010ae695-6cc8-4af4-919a-d15b92fdd68d';
+      const plant2 = await getPlantById(testUUID);
+      setResult(plant2); // Set the result to state
+    };
+
+    getData(); // Call the async function when the component mounts
+  }, []);
+  if (result === undefined) {
+    return <div>Loading...</div>;
+  } else {
+    return <PlantCard plant={result} />;
+  }
+}

components/PlantCard/PlantCard.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Plant } from '@/types/schema';
+import styles from './PlantCardStyles.module.css';
+
+export default function PlantCard({ plant }: { plant: Plant }) {
+  return (
+    <div className={styles.Card}>
+      <div className={styles.CardPic}>
+        <img alt={plant.plant_name}></img>
+      </div>
+      <div className={styles.CardContent}>
+        <h2>{plant.plant_name}</h2>
+        <div className={styles.PlantAttributes}>
+          <div className={styles.Attribute}>
+            {/* icon */}
+            <p>{plant.harvest_start + ' - ' + plant.harvest_end}</p>
+          </div>
+          <div className={styles.Attribute}>
+            {/* icon */}
+            <p>{plant.water_frequency}</p>
+          </div>
+          <div className={styles.Attribute}>
+            {/* icon */}
+            <p>
+              {plant.sunlight_min_hours}
+              {plant.sunlight_max_hours
+                ? ' - ' + plant.sunlight_max_hours
+                : ''}{' '}
+              hours/day
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/PlantCard/PlantCardStyles.module.css

@@ -0,0 +1,52 @@
+.Card {
+  height: 40vh;
+  width: 20vw;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  border-radius: 12px;
+  background-color: white;
+  box-shadow:
+    0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12),
+    0 11px 15px -7px rgba(0, 0, 0, 0.2);
+}
+
+.CardPic {
+  height: 60%;
+  width: 100%;
+  background-color: #f5f6f6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.CardContent {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1vw;
+  height: 40%;
+  row-gap: 1vh;
+}
+.CardContent > * {
+  margin: 0;
+}
+.CardContent > h2 {
+  font-size: 1.5vw;
+  margin-top: 1vh;
+}
+.PlantAttributes {
+  display: flex;
+  flex-direction: column;
+  gap: 1vh;
+}
+
+.Attribute {
+  display: flex;
+  flex-direction: row;
+}
+.Attribute > * {
+  margin: 0;
+  font-size: 1vw;
+}