From 279bf25a815f3906c3d46132b6fbc18d8fc76ade Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:46:35 +0000
Subject: [PATCH 1/3] Add new components

---
 components/Card.module.css |  66 ++++++++++++++++++++
 components/Card.tsx        | 122 +++++++++++++++++++++++++++++++++++++
 components/CardPage.tsx    |  11 ++++
 components/sun.svg         |   4 ++
 components/sunImage.svg    |   4 ++
 5 files changed, 207 insertions(+)
 create mode 100644 components/Card.module.css
 create mode 100644 components/Card.tsx
 create mode 100644 components/CardPage.tsx
 create mode 100644 components/sun.svg
 create mode 100644 components/sunImage.svg

diff --git a/components/Card.module.css b/components/Card.module.css
new file mode 100644
index 00000000..d7ee0958
--- /dev/null
+++ b/components/Card.module.css
@@ -0,0 +1,66 @@
+.title {
+  font-size: 37px;
+  font-weight: 500;
+}
+.sun {
+  width: 50px;
+  height: 50px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px;
+  width: 100%;
+  height: 93px;
+}
+.bodyText {
+  width: 100%;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  line-height: 23px;
+}
+.body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  padding: 25px;
+  width: 100%;
+}
+.theme {
+  font-size: 15px;
+  font-weight: 500;
+}
+.buttonText {
+  font-size: 15px;
+  font-weight: 500;
+}
+.button {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+  padding: 10px;
+  border-radius: 5px;
+}
+.footer {
+  overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  padding: 25px;
+  width: 100%;
+}
+.cardComponent {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  border-radius: 20px;
+  width: 360px;
+}
diff --git a/components/Card.tsx b/components/Card.tsx
new file mode 100644
index 00000000..d0df248b
--- /dev/null
+++ b/components/Card.tsx
@@ -0,0 +1,122 @@
+import styles from "./Card.module.css";
+import sunImage from "./sunImage.svg";
+import sun from "./sun.svg";
+export const Card = ({
+  override,
+  mode,
+}: {
+  override?: React.CSSProperties;
+  mode: string;
+}) => {
+  const titleMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const bodyTextMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const themeMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(255, 255, 255)",
+        }
+      : {
+          color: "rgb(0, 0, 0)",
+        };
+  const buttonTextMode =
+    mode === "Dark"
+      ? {
+          color: "rgb(0, 0, 0)",
+        }
+      : {
+          color: "rgb(255, 255, 255)",
+        };
+  const buttonMode =
+    mode === "Dark"
+      ? {
+          backgroundColor: "rgb(255, 255, 255)",
+        }
+      : {
+          backgroundColor: "rgb(7, 14, 19)",
+        };
+  const cardMode =
+    mode === "Dark"
+      ? {
+          backgroundColor: "rgb(7, 14, 19)",
+        }
+      : {
+          backgroundColor: "rgb(255, 255, 255)",
+        };
+  let sunSrc;
+  if (mode === "Light") {
+    sunSrc = sunImage;
+  } else {
+    sunSrc = sun;
+  }
+  return (
+    <div
+      className={styles.cardComponent}
+      style={{
+        ...cardMode,
+        ...override,
+      }}
+    >
+      <div className={styles.header}>
+        <p
+          className={styles.title}
+          style={{
+            ...titleMode,
+          }}
+        >
+          Trends
+        </p>
+        <img className={styles.sun} src={sunSrc.src} />
+      </div>
+      <div className={styles.body}>
+        <p
+          className={styles.bodyText}
+          style={{
+            ...bodyTextMode,
+          }}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididun...
+        </p>
+      </div>
+      <div className={styles.footer}>
+        <p
+          className={styles.theme}
+          style={{
+            ...themeMode,
+          }}
+        >
+          Theme
+        </p>
+        <div
+          className={styles.button}
+          style={{
+            ...buttonMode,
+          }}
+        >
+          <p
+            className={styles.buttonText}
+            style={{
+              ...buttonTextMode,
+            }}
+          >
+            Click me!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/components/CardPage.tsx b/components/CardPage.tsx
new file mode 100644
index 00000000..8c99b42b
--- /dev/null
+++ b/components/CardPage.tsx
@@ -0,0 +1,11 @@
+import { Card } from "./Card";
+export const CardPage = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <Card
+      mode="Light"
+      override={{
+        width: "100%",
+      }}
+    />
+  );
+};
diff --git a/components/sun.svg b/components/sun.svg
new file mode 100644
index 00000000..3b44e256
--- /dev/null
+++ b/components/sun.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect vector-effect="non-scaling-stroke" y="0.5" width="50" height="50" rx="25" fill="black"/>
+<path vector-effect="non-scaling-stroke" d="M19.995 25.5C19.995 28.261 22.241 30.507 25.002 30.507C27.763 30.507 30.009 28.261 30.009 25.5C30.009 22.739 27.763 20.493 25.002 20.493C22.241 20.493 19.995 22.739 19.995 25.5ZM24 32.5H26V35.5H24V32.5ZM24 15.5H26V18.5H24V15.5ZM15 24.5H18V26.5H15V24.5ZM32 24.5H35V26.5H32V24.5ZM18.637 33.278L17.223 31.864L19.344 29.743L20.758 31.157L18.637 33.278ZM29.242 19.844L31.364 17.722L32.778 19.136L30.656 21.258L29.242 19.844ZM19.344 21.259L17.223 19.137L18.638 17.723L20.758 19.845L19.344 21.259ZM32.778 31.864L31.364 33.278L29.242 31.156L30.656 29.742L32.778 31.864Z" fill="#F8D000"/>
+</svg>
diff --git a/components/sunImage.svg b/components/sunImage.svg
new file mode 100644
index 00000000..3e84712e
--- /dev/null
+++ b/components/sunImage.svg
@@ -0,0 +1,4 @@
+<svg preserveAspectRatio="none" width="50" height="51" viewBox="0 0 50 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect vector-effect="non-scaling-stroke" y="0.5" width="50" height="50" rx="25" fill="#F2F2F2"/>
+<path vector-effect="non-scaling-stroke" d="M19.995 25.5C19.995 28.261 22.241 30.507 25.002 30.507C27.763 30.507 30.009 28.261 30.009 25.5C30.009 22.739 27.763 20.493 25.002 20.493C22.241 20.493 19.995 22.739 19.995 25.5ZM24 32.5H26V35.5H24V32.5ZM24 15.5H26V18.5H24V15.5ZM15 24.5H18V26.5H15V24.5ZM32 24.5H35V26.5H32V24.5ZM18.637 33.278L17.223 31.864L19.344 29.743L20.758 31.157L18.637 33.278ZM29.242 19.844L31.364 17.722L32.778 19.136L30.656 21.258L29.242 19.844ZM19.344 21.259L17.223 19.137L18.638 17.723L20.758 19.845L19.344 21.259ZM32.778 31.864L31.364 33.278L29.242 31.156L30.656 29.742L32.778 31.864Z" fill="black"/>
+</svg>

From 2f1e1b132cf9bdd1e471852feb6af077a601a617 Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:46:57 +0000
Subject: [PATCH 2/3] Improve naming of CSS class names

---
 components/Card.module.css | 22 ++++-----
 components/Card.tsx        | 94 +++++++++++++++++++-------------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/components/Card.module.css b/components/Card.module.css
index d7ee0958..c9207727 100644
--- a/components/Card.module.css
+++ b/components/Card.module.css
@@ -1,12 +1,12 @@
-.title {
+.cardTitle{
   font-size: 37px;
   font-weight: 500;
 }
-.sun {
+.sunImage{
   width: 50px;
   height: 50px;
 }
-.header {
+.cardHeader{
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -14,14 +14,14 @@
   width: 100%;
   height: 93px;
 }
-.bodyText {
+.cardBodyText{
   width: 100%;
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.5px;
   line-height: 23px;
 }
-.body {
+.cardBody{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -29,15 +29,15 @@
   padding: 25px;
   width: 100%;
 }
-.theme {
+.cardTheme{
   font-size: 15px;
   font-weight: 500;
 }
-.buttonText {
+.buttonText{
   font-size: 15px;
   font-weight: 500;
 }
-.button {
+.cardButton{
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -46,7 +46,7 @@
   padding: 10px;
   border-radius: 5px;
 }
-.footer {
+.cardFooter{
   overflow: hidden;
   display: flex;
   justify-content: space-between;
@@ -55,7 +55,7 @@
   padding: 25px;
   width: 100%;
 }
-.cardComponent {
+.cardComponent{
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -63,4 +63,4 @@
   height: fit-content;
   border-radius: 20px;
   width: 360px;
-}
+}
\ No newline at end of file
diff --git a/components/Card.tsx b/components/Card.tsx
index d0df248b..152558d2 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -64,59 +64,59 @@ export const Card = ({
   }
   return (
     <div
-      className={styles.cardComponent}
-      style={{
-        ...cardMode,
-        ...override,
-      }}
-    >
-      <div className={styles.header}>
-        <p
-          className={styles.title}
-          style={{
-            ...titleMode,
-          }}
-        >
-          Trends
-        </p>
-        <img className={styles.sun} src={sunSrc.src} />
-      </div>
-      <div className={styles.body}>
-        <p
-          className={styles.bodyText}
-          style={{
-            ...bodyTextMode,
-          }}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididun...
-        </p>
-      </div>
-      <div className={styles.footer}>
+     className={styles.cardComponent}
+     style={{
+       ...cardMode,
+       ...override,
+     }}
+   >
+    <div className={styles.cardHeader}>
+      <p
+        className={styles.cardTitle}
+        style={{
+          ...titleMode,
+        }}
+      >
+        Trends
+      </p>
+      <img className={styles.sunImage} src={sunSrc.src} />
+    </div>
+    <div className={styles.cardBody}>
+      <p
+        className={styles.cardBodyText}
+        style={{
+          ...bodyTextMode,
+        }}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididun...
+      </p>
+    </div>
+    <div className={styles.cardFooter}>
+      <p
+        className={styles.cardTheme}
+        style={{
+          ...themeMode,
+        }}
+      >
+        Theme
+      </p>
+      <div
+        className={styles.cardButton}
+        style={{
+          ...buttonMode,
+        }}
+      >
         <p
-          className={styles.theme}
+          className={styles.buttonText}
           style={{
-            ...themeMode,
+            ...buttonTextMode,
           }}
         >
-          Theme
+          Click me!
         </p>
-        <div
-          className={styles.button}
-          style={{
-            ...buttonMode,
-          }}
-        >
-          <p
-            className={styles.buttonText}
-            style={{
-              ...buttonTextMode,
-            }}
-          >
-            Click me!
-          </p>
-        </div>
       </div>
     </div>
+   </div> 
   );
 };

From 820aa443a4d729413feb59e7667500c08f35045a Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:47:04 +0000
Subject: [PATCH 3/3] Modularize generated code

---
 components/Card.tsx | 115 +++++++++++++++++++++++++-------------------
 1 file changed, 66 insertions(+), 49 deletions(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index 152558d2..2c7c81ae 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -1,6 +1,7 @@
 import styles from "./Card.module.css";
 import sunImage from "./sunImage.svg";
 import sun from "./sun.svg";
+
 export const Card = ({
   override,
   mode,
@@ -64,59 +65,75 @@ export const Card = ({
   }
   return (
     <div
-     className={styles.cardComponent}
-     style={{
-       ...cardMode,
-       ...override,
-     }}
-   >
-    <div className={styles.cardHeader}>
-      <p
-        className={styles.cardTitle}
-        style={{
-          ...titleMode,
-        }}
-      >
-        Trends
-      </p>
-      <img className={styles.sunImage} src={sunSrc.src} />
+      className={styles.cardComponent}
+      style={{
+        ...cardMode,
+        ...override,
+      }}
+    >
+      <Trends titleMode={titleMode} sunSrc={sunSrc} />
+      <CardBody bodyTextMode={bodyTextMode} />
+      <CardFooter
+        themeMode={themeMode}
+        buttonMode={buttonMode}
+        buttonTextMode={buttonTextMode}
+      />
     </div>
-    <div className={styles.cardBody}>
-      <p
-        className={styles.cardBodyText}
-        style={{
-          ...bodyTextMode,
-        }}
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-        eiusmod tempor incididun...
-      </p>
-    </div>
-    <div className={styles.cardFooter}>
+  );
+};
+
+const Trends = ({ titleMode, sunSrc }: any) => (
+  <div className={styles.cardHeader}>
+    <p
+      className={styles.cardTitle}
+      style={{
+        ...titleMode,
+      }}
+    >
+      Trends
+    </p>
+    <img className={styles.sunImage} src={sunSrc.src} />
+  </div>
+);
+
+const CardBody = ({ bodyTextMode }: any) => (
+  <div className={styles.cardBody}>
+    <p
+      className={styles.cardBodyText}
+      style={{
+        ...bodyTextMode,
+      }}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididun...
+    </p>
+  </div>
+);
+
+const CardFooter = ({ themeMode, buttonMode, buttonTextMode }: any) => (
+  <div className={styles.cardFooter}>
+    <p
+      className={styles.cardTheme}
+      style={{
+        ...themeMode,
+      }}
+    >
+      Theme
+    </p>
+    <div
+      className={styles.cardButton}
+      style={{
+        ...buttonMode,
+      }}
+    >
       <p
-        className={styles.cardTheme}
+        className={styles.buttonText}
         style={{
-          ...themeMode,
+          ...buttonTextMode,
         }}
       >
-        Theme
+        Click me!
       </p>
-      <div
-        className={styles.cardButton}
-        style={{
-          ...buttonMode,
-        }}
-      >
-        <p
-          className={styles.buttonText}
-          style={{
-            ...buttonTextMode,
-          }}
-        >
-          Click me!
-        </p>
-      </div>
     </div>
-   </div> 
-  );
-};
+  </div>
+);