Added database function + basic plant card component

components/PlantCard/PlantCard.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from './PlantCardStyles.module.css';
+
+function format(start: String, end: String) {
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+}
+export default function PlantCard(plantObj: Plant) {
+  return (
+    <div className={styles.Card}>
+      <div className={styles.CardPic}>
+        <img alt={plantObj.plant_name}></img>
+      </div>
+      <div className={styles.cardContent}>
+        <h2>{plantObj.plant_name}</h2>
+        <div className={styles.plantAttributes}>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.harvest_start + ' - ' + plantObj.harvest_end}</p>
+          </div>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.water_num_times_per_week + ' times / wk'}</p>
+          </div>
+          <div className={styles.attribute}>
+            {/* icon */}
+            <p>{plantObj.sunlight_required}</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: 20px;
+  height: 40%;
+  row-gap: 10px;
+}
+.cardContent > * {
+  margin: 0;
+}
+.cardContent > h2 {
+  font-size: 20px;
+  margin-top: 10px;
+}
+.plantAttributes {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.attribute {
+  display: flex;
+  flex-direction: row;
+}
+.attribute > * {
+  margin: 0;
+  font-size: 14px;
+}