From ab64aae9313f207cdd692c199c63c2677b6b4d51 Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Tue, 24 Oct 2023 01:42:28 +0000
Subject: [PATCH 1/2] Add new components

---
 components/CompactIconButton.tsx | 290 +++++++++++++++++++++++++++++++
 components/QrcodeScan.tsx        |  13 ++
 components/TypePage.tsx          | 200 +++++++++++++++++++++
 components/mobile.svg            |   3 +
 components/qrcodeScan.svg        |   3 +
 5 files changed, 509 insertions(+)
 create mode 100644 components/CompactIconButton.tsx
 create mode 100644 components/QrcodeScan.tsx
 create mode 100644 components/TypePage.tsx
 create mode 100644 components/mobile.svg
 create mode 100644 components/qrcodeScan.svg

diff --git a/components/CompactIconButton.tsx b/components/CompactIconButton.tsx
new file mode 100644
index 00000000..d2d1520f
--- /dev/null
+++ b/components/CompactIconButton.tsx
@@ -0,0 +1,290 @@
+import { QrcodeScan } from "./QrcodeScan";
+import styled from "styled-components";
+const CompactIconButtonComponent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 7px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 25px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent1 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 9px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 30px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent2 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 27px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent3 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 7px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 25px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgb(255, 255, 255);
+`;
+const CompactIconButtonComponent4 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 7px;
+  border-radius: 4px;
+  height: 25px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent5 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 27px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgb(255, 255, 255);
+`;
+const CompactIconButtonComponent6 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 4px;
+  height: 27px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent7 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 8px;
+  border-radius: 4px;
+  height: 27px;
+`;
+const CompactIconButtonComponent8 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 9px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.02);
+  height: 30px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgb(255, 255, 255);
+`;
+const CompactIconButtonComponent9 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 9px;
+  border-radius: 4px;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 0.04);
+`;
+const CompactIconButtonComponent10 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 9px;
+  border-radius: 4px;
+  height: 30px;
+`;
+const CompactIconButtonComponent11 = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  padding: 4px 7px;
+  border-radius: 4px;
+  height: 25px;
+`;
+export const CompactIconButton = ({
+  override,
+  hover,
+  size,
+  type,
+}: {
+  override?: React.CSSProperties;
+  hover: string;
+  size: string;
+  type: string;
+}) => {
+  if (hover === "no" && size === "small" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent11 style={override}>
+        <QrcodeScan
+          override={{
+            height: "14px",
+            width: "14px",
+          }}
+        />
+      </CompactIconButtonComponent11>
+    );
+  } else if (hover === "no" && size === "large" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent10 style={override}>
+        <QrcodeScan
+          override={{
+            height: "20px",
+            width: "20px",
+          }}
+        />
+      </CompactIconButtonComponent10>
+    );
+  } else if (hover === "yes" && size === "large" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent9 style={override}>
+        <QrcodeScan
+          override={{
+            height: "20px",
+            width: "20px",
+          }}
+        />
+      </CompactIconButtonComponent9>
+    );
+  } else if (hover === "no" && size === "large" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent8 style={override}>
+        <QrcodeScan
+          override={{
+            height: "20px",
+            width: "20px",
+          }}
+        />
+      </CompactIconButtonComponent8>
+    );
+  } else if (hover === "no" && size === "medium" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent7 style={override}>
+        <QrcodeScan
+          override={{
+            height: "16px",
+            width: "16px",
+          }}
+        />
+      </CompactIconButtonComponent7>
+    );
+  } else if (hover === "yes" && size === "medium" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent6 style={override}>
+        <QrcodeScan
+          override={{
+            height: "16px",
+            width: "16px",
+          }}
+        />
+      </CompactIconButtonComponent6>
+    );
+  } else if (hover === "no" && size === "medium" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent5 style={override}>
+        <QrcodeScan
+          override={{
+            height: "16px",
+            width: "16px",
+          }}
+        />
+      </CompactIconButtonComponent5>
+    );
+  } else if (hover === "yes" && size === "small" && type === "ghost") {
+    return (
+      <CompactIconButtonComponent4 style={override}>
+        <QrcodeScan
+          override={{
+            height: "14px",
+            width: "14px",
+          }}
+        />
+      </CompactIconButtonComponent4>
+    );
+  } else if (hover === "no" && size === "small" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent3 style={override}>
+        <QrcodeScan
+          override={{
+            height: "14px",
+            width: "14px",
+          }}
+        />
+      </CompactIconButtonComponent3>
+    );
+  } else if (hover === "yes" && size === "medium" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent2 style={override}>
+        <QrcodeScan
+          override={{
+            height: "16px",
+            width: "16px",
+          }}
+        />
+      </CompactIconButtonComponent2>
+    );
+  } else if (hover === "yes" && size === "large" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent1 style={override}>
+        <QrcodeScan
+          override={{
+            height: "20px",
+            width: "20px",
+          }}
+        />
+      </CompactIconButtonComponent1>
+    );
+  } else if (hover === "yes" && size === "small" && type === "secondary") {
+    return (
+      <CompactIconButtonComponent style={override}>
+        <QrcodeScan
+          override={{
+            height: "14px",
+            width: "14px",
+          }}
+        />
+      </CompactIconButtonComponent>
+    );
+  } else {
+    return null;
+  }
+};
diff --git a/components/QrcodeScan.tsx b/components/QrcodeScan.tsx
new file mode 100644
index 00000000..0fd25adc
--- /dev/null
+++ b/components/QrcodeScan.tsx
@@ -0,0 +1,13 @@
+import qrcodeScan from "./qrcodeScan.svg";
+import styled from "styled-components";
+const QrcodeScanComponent = styled.img`
+  width: 24px;
+  height: 24px;
+`;
+export const QrcodeScan = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  return <QrcodeScanComponent src={qrcodeScan.src} style={override} />;
+};
diff --git a/components/TypePage.tsx b/components/TypePage.tsx
new file mode 100644
index 00000000..ceadcd7c
--- /dev/null
+++ b/components/TypePage.tsx
@@ -0,0 +1,200 @@
+import mobile from "./mobile.svg";
+import { CompactIconButton } from "./CompactIconButton";
+import styled from "styled-components";
+const Selected = styled.div`
+  position: absolute;
+  width: 141px;
+  left: 0px;
+  height: 184px;
+  top: 0px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  border-radius: 8px;
+`;
+const NatalieJason_1_1 = styled.p`
+  position: absolute;
+  left: 8px;
+  top: 36px;
+  color: rgb(0, 0, 0);
+  font-size: 11px;
+  font-family: Universal Sans Text Trial;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  line-height: 1.3em;
+`;
+const Mobile = styled.img`
+  position: absolute;
+  width: 12px;
+  left: calc(50% - 6px);
+  height: 12px;
+  top: calc(50% - 6px);
+`;
+const PageHeaderIconLight = styled.div`
+  overflow: hidden;
+  border-radius: 4px;
+  position: absolute;
+  box-shadow: inset 0px -0.5px 0px 0.5px rgba(0, 0, 0, 0.1),
+    inset 0px 0.5px 0px rgba(0, 0, 0, 0.1);
+  width: 24px;
+  left: 8px;
+  height: 24px;
+  top: 8px;
+  background-color: rgb(255, 255, 255);
+`;
+const Rectangle_39272 = styled.div`
+  position: absolute;
+  width: 112px;
+  left: 8px;
+  height: 8px;
+  top: 58px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border-radius: 2px;
+`;
+const Rectangle_39273 = styled.div`
+  position: absolute;
+  width: 108px;
+  left: 8px;
+  height: 8px;
+  top: 74px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border-radius: 2px;
+`;
+const Rectangle_39274 = styled.div`
+  position: absolute;
+  width: 102px;
+  left: 8px;
+  height: 8px;
+  top: 90px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border-radius: 2px;
+`;
+const Rectangle_39275 = styled.div`
+  position: absolute;
+  width: 112px;
+  left: 8px;
+  height: 8px;
+  top: 106px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border-radius: 2px;
+`;
+const MobileFileIcons = styled.div`
+  overflow: hidden;
+  border-radius: 4px;
+  position: relative;
+  width: 129px;
+  height: 129px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.08);
+  border-width: 1px;
+  background-color: rgb(250, 250, 250);
+`;
+const NatalieJason_1_1Text = styled.p`
+  flex: 1 1 0%;
+  min-width: 0px;
+  color: rgb(0, 0, 0);
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 1.3em;
+`;
+const TitleAndButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  height: fit-content;
+  width: 100%;
+`;
+const SkiffPage = styled.p`
+  color: rgba(0, 0, 0, 0.57);
+  font-size: 11px;
+  font-weight: 300;
+  letter-spacing: 0.01em;
+  line-height: 1.3em;
+`;
+const Info = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  height: fit-content;
+`;
+const DescContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: 129px;
+  flex: 1 1 0%;
+  min-height: 0px;
+`;
+const Desc = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: fit-content;
+  width: 100%;
+`;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  height: fit-content;
+  padding: 6px;
+  position: absolute;
+  width: 141px;
+  left: 0px;
+  top: 0px;
+`;
+const TypePageComponent = styled.div`
+  overflow: hidden;
+  border-radius: 8px;
+  position: relative;
+  width: 100%;
+  height: 184px;
+  font-family: Universal Sans Text;
+`;
+export const TypePage = ({ override }: { override?: React.CSSProperties }) => {
+  return (
+    <TypePageComponent style={override}>
+      <Selected />
+      <Container>
+        <MobileFileIcons>
+          <NatalieJason_1_1>Natalie / Jason 1:1</NatalieJason_1_1>
+          <PageHeaderIconLight>
+            <Mobile src={mobile.src} />
+          </PageHeaderIconLight>
+          <Rectangle_39272 />
+          <Rectangle_39273 />
+          <Rectangle_39274 />
+          <Rectangle_39275 />
+        </MobileFileIcons>
+        <Desc>
+          <DescContainer>
+            <TitleAndButton>
+              <NatalieJason_1_1Text>Natalie / Jason 1:1</NatalieJason_1_1Text>
+              <CompactIconButton hover="no" size="small" type="ghost" />
+            </TitleAndButton>
+            <Info>
+              <SkiffPage>Skiff page</SkiffPage>
+            </Info>
+          </DescContainer>
+        </Desc>
+      </Container>
+    </TypePageComponent>
+  );
+};
diff --git a/components/mobile.svg b/components/mobile.svg
new file mode 100644
index 00000000..51f98e0f
--- /dev/null
+++ b/components/mobile.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M3.25 2H9.25V10H3.25V2ZM2.25 2C2.25 1.44772 2.69772 1 3.25 1H9.25C9.80228 1 10.25 1.44772 10.25 2V10C10.25 10.5523 9.80228 11 9.25 11H3.25C2.69772 11 2.25 10.5523 2.25 10V2ZM6.25 9C6.52614 9 6.75 8.77614 6.75 8.5C6.75 8.22386 6.52614 8 6.25 8C5.97386 8 5.75 8.22386 5.75 8.5C5.75 8.77614 5.97386 9 6.25 9Z" fill="#AF5883"/>
+</svg>
diff --git a/components/qrcodeScan.svg b/components/qrcodeScan.svg
new file mode 100644
index 00000000..d0277915
--- /dev/null
+++ b/components/qrcodeScan.svg
@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path vector-effect="non-scaling-stroke" fill-rule="evenodd" clip-rule="evenodd" d="M4 4H9V9H4V4ZM2 4C2 2.89543 2.89543 2 4 2H9H11V4V9V11H9H4H2V9V4ZM4 15H9V20H4L4 15ZM2 13H4H9H11V15V20V22H9H4C2.89543 22 2 21.1046 2 20V15V13ZM20 4H15V9H20V4ZM15 2H13V4V9V11H15H20H22V9V4C22 2.89543 21.1046 2 20 2H15ZM7.5 5.5H5.5V7.5H7.5V5.5ZM5.5 16.5H7.5V18.5H5.5V16.5ZM18.5 5.5H16.5V7.5H18.5V5.5ZM16.5 16.5H18.5V18.5H16.5V16.5ZM15 15H18V13H15H13V15V16.5H15V15ZM20 20V18.5H22V20C22 21.1046 21.1046 22 20 22H17V20H20ZM22 15V16.5H20V15V13H22V15ZM13 18.5H15V20V22H13V20V18.5Z" fill="black"/>
+</svg>

From 96ed574474f0901511145339c5f466556b584b14 Mon Sep 17 00:00:00 2001
From: "vivid-github[bot]"
 <129557859+vivid-github[bot]@users.noreply.github.com>
Date: Tue, 24 Oct 2023 01:42:40 +0000
Subject: [PATCH 2/2] Modularize generated code

---
 components/CompactIconButton.tsx | 13 ++++++
 components/TypePage.tsx          | 68 +++++++++++++++++++++-----------
 2 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/components/CompactIconButton.tsx b/components/CompactIconButton.tsx
index d2d1520f..c1b064b7 100644
--- a/components/CompactIconButton.tsx
+++ b/components/CompactIconButton.tsx
@@ -1,5 +1,6 @@
 import { QrcodeScan } from "./QrcodeScan";
 import styled from "styled-components";
+
 const CompactIconButtonComponent = styled.div`
   display: flex;
   justify-content: center;
@@ -14,6 +15,7 @@ const CompactIconButtonComponent = styled.div`
   border-width: 1px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent1 = styled.div`
   display: flex;
   justify-content: center;
@@ -28,6 +30,7 @@ const CompactIconButtonComponent1 = styled.div`
   border-width: 1px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent2 = styled.div`
   display: flex;
   justify-content: center;
@@ -42,6 +45,7 @@ const CompactIconButtonComponent2 = styled.div`
   border-width: 1px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent3 = styled.div`
   display: flex;
   justify-content: center;
@@ -56,6 +60,7 @@ const CompactIconButtonComponent3 = styled.div`
   border-width: 1px;
   background-color: rgb(255, 255, 255);
 `;
+
 const CompactIconButtonComponent4 = styled.div`
   display: flex;
   justify-content: center;
@@ -66,6 +71,7 @@ const CompactIconButtonComponent4 = styled.div`
   height: 25px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent5 = styled.div`
   display: flex;
   justify-content: center;
@@ -80,6 +86,7 @@ const CompactIconButtonComponent5 = styled.div`
   border-width: 1px;
   background-color: rgb(255, 255, 255);
 `;
+
 const CompactIconButtonComponent6 = styled.div`
   display: flex;
   justify-content: center;
@@ -90,6 +97,7 @@ const CompactIconButtonComponent6 = styled.div`
   height: 27px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent7 = styled.div`
   display: flex;
   justify-content: center;
@@ -99,6 +107,7 @@ const CompactIconButtonComponent7 = styled.div`
   border-radius: 4px;
   height: 27px;
 `;
+
 const CompactIconButtonComponent8 = styled.div`
   display: flex;
   justify-content: center;
@@ -113,6 +122,7 @@ const CompactIconButtonComponent8 = styled.div`
   border-width: 1px;
   background-color: rgb(255, 255, 255);
 `;
+
 const CompactIconButtonComponent9 = styled.div`
   display: flex;
   justify-content: center;
@@ -123,6 +133,7 @@ const CompactIconButtonComponent9 = styled.div`
   height: 30px;
   background-color: rgba(0, 0, 0, 0.04);
 `;
+
 const CompactIconButtonComponent10 = styled.div`
   display: flex;
   justify-content: center;
@@ -132,6 +143,7 @@ const CompactIconButtonComponent10 = styled.div`
   border-radius: 4px;
   height: 30px;
 `;
+
 const CompactIconButtonComponent11 = styled.div`
   display: flex;
   justify-content: center;
@@ -141,6 +153,7 @@ const CompactIconButtonComponent11 = styled.div`
   border-radius: 4px;
   height: 25px;
 `;
+
 export const CompactIconButton = ({
   override,
   hover,
diff --git a/components/TypePage.tsx b/components/TypePage.tsx
index ceadcd7c..92e92339 100644
--- a/components/TypePage.tsx
+++ b/components/TypePage.tsx
@@ -1,6 +1,7 @@
 import mobile from "./mobile.svg";
 import { CompactIconButton } from "./CompactIconButton";
 import styled from "styled-components";
+
 const Selected = styled.div`
   position: absolute;
   width: 141px;
@@ -13,6 +14,7 @@ const Selected = styled.div`
   border-width: 1px;
   border-radius: 8px;
 `;
+
 const NatalieJason_1_1 = styled.p`
   position: absolute;
   left: 8px;
@@ -24,6 +26,7 @@ const NatalieJason_1_1 = styled.p`
   letter-spacing: 0.01em;
   line-height: 1.3em;
 `;
+
 const Mobile = styled.img`
   position: absolute;
   width: 12px;
@@ -31,6 +34,7 @@ const Mobile = styled.img`
   height: 12px;
   top: calc(50% - 6px);
 `;
+
 const PageHeaderIconLight = styled.div`
   overflow: hidden;
   border-radius: 4px;
@@ -43,6 +47,7 @@ const PageHeaderIconLight = styled.div`
   top: 8px;
   background-color: rgb(255, 255, 255);
 `;
+
 const Rectangle_39272 = styled.div`
   position: absolute;
   width: 112px;
@@ -55,6 +60,7 @@ const Rectangle_39272 = styled.div`
   border-width: 1px;
   border-radius: 2px;
 `;
+
 const Rectangle_39273 = styled.div`
   position: absolute;
   width: 108px;
@@ -67,6 +73,7 @@ const Rectangle_39273 = styled.div`
   border-width: 1px;
   border-radius: 2px;
 `;
+
 const Rectangle_39274 = styled.div`
   position: absolute;
   width: 102px;
@@ -79,6 +86,7 @@ const Rectangle_39274 = styled.div`
   border-width: 1px;
   border-radius: 2px;
 `;
+
 const Rectangle_39275 = styled.div`
   position: absolute;
   width: 112px;
@@ -91,6 +99,7 @@ const Rectangle_39275 = styled.div`
   border-width: 1px;
   border-radius: 2px;
 `;
+
 const MobileFileIcons = styled.div`
   overflow: hidden;
   border-radius: 4px;
@@ -102,6 +111,7 @@ const MobileFileIcons = styled.div`
   border-width: 1px;
   background-color: rgb(250, 250, 250);
 `;
+
 const NatalieJason_1_1Text = styled.p`
   flex: 1 1 0%;
   min-width: 0px;
@@ -110,6 +120,7 @@ const NatalieJason_1_1Text = styled.p`
   font-weight: 300;
   line-height: 1.3em;
 `;
+
 const TitleAndButton = styled.div`
   display: flex;
   justify-content: center;
@@ -118,6 +129,7 @@ const TitleAndButton = styled.div`
   height: fit-content;
   width: 100%;
 `;
+
 const SkiffPage = styled.p`
   color: rgba(0, 0, 0, 0.57);
   font-size: 11px;
@@ -125,6 +137,7 @@ const SkiffPage = styled.p`
   letter-spacing: 0.01em;
   line-height: 1.3em;
 `;
+
 const Info = styled.div`
   display: flex;
   justify-content: center;
@@ -132,6 +145,7 @@ const Info = styled.div`
   width: fit-content;
   height: fit-content;
 `;
+
 const DescContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -141,6 +155,7 @@ const DescContainer = styled.div`
   flex: 1 1 0%;
   min-height: 0px;
 `;
+
 const Desc = styled.div`
   display: flex;
   flex-direction: column;
@@ -148,6 +163,7 @@ const Desc = styled.div`
   height: fit-content;
   width: 100%;
 `;
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -160,6 +176,7 @@ const Container = styled.div`
   left: 0px;
   top: 0px;
 `;
+
 const TypePageComponent = styled.div`
   overflow: hidden;
   border-radius: 8px;
@@ -168,33 +185,38 @@ const TypePageComponent = styled.div`
   height: 184px;
   font-family: Universal Sans Text;
 `;
+
 export const TypePage = ({ override }: { override?: React.CSSProperties }) => {
   return (
     <TypePageComponent style={override}>
       <Selected />
-      <Container>
-        <MobileFileIcons>
-          <NatalieJason_1_1>Natalie / Jason 1:1</NatalieJason_1_1>
-          <PageHeaderIconLight>
-            <Mobile src={mobile.src} />
-          </PageHeaderIconLight>
-          <Rectangle_39272 />
-          <Rectangle_39273 />
-          <Rectangle_39274 />
-          <Rectangle_39275 />
-        </MobileFileIcons>
-        <Desc>
-          <DescContainer>
-            <TitleAndButton>
-              <NatalieJason_1_1Text>Natalie / Jason 1:1</NatalieJason_1_1Text>
-              <CompactIconButton hover="no" size="small" type="ghost" />
-            </TitleAndButton>
-            <Info>
-              <SkiffPage>Skiff page</SkiffPage>
-            </Info>
-          </DescContainer>
-        </Desc>
-      </Container>
+      <NatalieJason11 />
     </TypePageComponent>
   );
 };
+
+const NatalieJason11 = () => (
+  <Container>
+    <MobileFileIcons>
+      <NatalieJason_1_1>Natalie / Jason 1:1</NatalieJason_1_1>
+      <PageHeaderIconLight>
+        <Mobile src={mobile.src} />
+      </PageHeaderIconLight>
+      <Rectangle_39272 />
+      <Rectangle_39273 />
+      <Rectangle_39274 />
+      <Rectangle_39275 />
+    </MobileFileIcons>
+    <Desc>
+      <DescContainer>
+        <TitleAndButton>
+          <NatalieJason_1_1Text>Natalie / Jason 1:1</NatalieJason_1_1Text>
+          <CompactIconButton hover="no" size="small" type="ghost" />
+        </TitleAndButton>
+        <Info>
+          <SkiffPage>Skiff page</SkiffPage>
+        </Info>
+      </DescContainer>
+    </Desc>
+  </Container>
+);