Vivid Code Gen

components/Archive.tsx

@@ -0,0 +1,9 @@
+import archive from "./archive.svg";
+import styled from "styled-components";
+const ArchiveComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Archive = ({ override }: { override?: React.CSSProperties }) => {
+  return <ArchiveComponent src={archive.src} style={override} />;
+};

components/At.tsx

@@ -0,0 +1,9 @@
+import at from "./at.svg";
+import styled from "styled-components";
+const AtComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const At = ({ override }: { override?: React.CSSProperties }) => {
+  return <AtComponent src={at.src} style={override} />;
+};

components/Calendar.tsx

@@ -0,0 +1,9 @@
+import calendar from "./calendar.svg";
+import styled from "styled-components";
+const CalendarComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Calendar = ({ override }: { override?: React.CSSProperties }) => {
+  return <CalendarComponent src={calendar.src} style={override} />;
+};

components/Compose.tsx

@@ -0,0 +1,9 @@
+import compose from "./compose.svg";
+import styled from "styled-components";
+const ComposeComponent = styled.img`
+  width: 14px;
+  height: 14px;
+`;
+export const Compose = ({ override }: { override?: React.CSSProperties }) => {
+  return <ComposeComponent src={compose.src} style={override} />;
+};

components/Contacts.tsx

@@ -0,0 +1,9 @@
+import contacts from "./contacts.svg";
+import styled from "styled-components";
+const ContactsComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Contacts = ({ override }: { override?: React.CSSProperties }) => {
+  return <ContactsComponent src={contacts.src} style={override} />;
+};

components/Draft.tsx

@@ -0,0 +1,9 @@
+import draft from "./draft.svg";
+import styled from "styled-components";
+const DraftComponent = styled.img`
+  width: 11px;
+  height: 13px;
+`;
+export const Draft = ({ override }: { override?: React.CSSProperties }) => {
+  return <DraftComponent src={draft.src} style={override} />;
+};

components/Header.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+const Mail = styled.p`
+  color: rgba(255, 255, 255, 0.28);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16.9px;
+`;
+const HeaderComponent = styled.div`
+  display: flex;
+  align-items: center;
+  height: fit-content;
+  padding: 8px 20px;
+  border-radius: 4px;
+  width: 239px;
+`;
+export const Header = ({
+  override,
+  headerText,
+}: {
+  override?: React.CSSProperties;
+  headerText: string;
+}) => {
+  return (
+    <HeaderComponent style={override}>
+      <Mail>{headerText}</Mail>
+    </HeaderComponent>
+  );
+};

components/Import.tsx

@@ -0,0 +1,17 @@
+import import from "./import.svg";
+import styled from "styled-components";
+const ImportComponent = styled.img`
+  width: 13px;
+  height: 12px;
+`;
+
+
+export const Import = ({
+  override
+}: {
+  override?: React.CSSProperties;
+}) => {
+
+
+  return <ImportComponent src={import.src} style={override} />;
+};

components/InboxIcon.tsx

@@ -0,0 +1,9 @@
+import inboxIcon from "./inboxIcon.svg";
+import styled from "styled-components";
+const InboxIconComponent = styled.img`
+  width: 16px;
+  height: 16px;
+`;
+export const InboxIcon = ({ override }: { override?: React.CSSProperties }) => {
+  return <InboxIconComponent src={inboxIcon.src} style={override} />;
+};

components/Invite.tsx

@@ -0,0 +1,9 @@
+import invite from "./invite.svg";
+import styled from "styled-components";
+const InviteComponent = styled.img`
+  width: 13px;
+  height: 12px;
+`;
+export const Invite = ({ override }: { override?: React.CSSProperties }) => {
+  return <InviteComponent src={invite.src} style={override} />;
+};

components/Search.tsx

@@ -0,0 +1,9 @@
+import search from "./search.svg";
+import styled from "styled-components";
+const SearchComponent = styled.img`
+  width: 14px;
+  height: 14px;
+`;
+export const Search = ({ override }: { override?: React.CSSProperties }) => {
+  return <SearchComponent src={search.src} style={override} />;
+};

components/Send.tsx

@@ -0,0 +1,9 @@
+import send from "./send.svg";
+import styled from "styled-components";
+const SendComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Send = ({ override }: { override?: React.CSSProperties }) => {
+  return <SendComponent src={send.src} style={override} />;
+};

components/SendFeedback.tsx

@@ -0,0 +1,13 @@
+import sendFeedback from "./sendFeedback.svg";
+import styled from "styled-components";
+const SendFeedbackComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const SendFeedback = ({
+  override,
+}: {
+  override?: React.CSSProperties;
+}) => {
+  return <SendFeedbackComponent src={sendFeedback.src} style={override} />;
+};

components/Settings.tsx

@@ -0,0 +1,9 @@
+import settings from "./settings.svg";
+import styled from "styled-components";
+const SettingsComponent = styled.img`
+  width: 13px;
+  height: 13px;
+`;
+export const Settings = ({ override }: { override?: React.CSSProperties }) => {
+  return <SettingsComponent src={settings.src} style={override} />;
+};