From 0d8a713a4a669e32d338f7046f821b0bf5f8aa9e Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:24:31 +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 ffb86af44cf7a5ec08311ec0ec57790cfbd0a73f Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:24:47 +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..b34c043a 100644
--- a/components/Card.module.css
+++ b/components/Card.module.css
@@ -1,12 +1,12 @@
-.title {
+.cardTitle{
   font-size: 37px;
   font-weight: 500;
 }
-.sun {
+.cardSun{
   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 {
+.cardButtonText{
   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..8ff3bc68 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.cardSun} 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.cardButtonText}
           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 314af7ce28340927c0c47595f287219137640bc2 Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:24:54 +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 8ff3bc68..68b3eaf1 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.cardSun} src={sunSrc.src} />
+      className={styles.cardComponent}
+      style={{
+        ...cardMode,
+        ...override,
+      }}
+    >
+      <CardHeader titleMode={titleMode} sunSrc={sunSrc} />
+      <CardBodyText 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 CardHeader = ({ titleMode, sunSrc }: any) => (
+  <div className={styles.cardHeader}>
+    <p
+      className={styles.cardTitle}
+      style={{
+        ...titleMode,
+      }}
+    >
+      Trends
+    </p>
+    <img className={styles.cardSun} src={sunSrc.src} />
+  </div>
+);
+
+const CardBodyText = ({ 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.cardButtonText}
         style={{
-          ...themeMode,
+          ...buttonTextMode,
         }}
       >
-        Theme
+        Click me!
       </p>
-      <div
-        className={styles.cardButton}
-        style={{
-          ...buttonMode,
-        }}
-      >
-        <p
-          className={styles.cardButtonText}
-          style={{
-            ...buttonTextMode,
-          }}
-        >
-          Click me!
-        </p>
-      </div>
     </div>
-   </div> 
-  );
-};
+  </div>
+);