From b6926ecf3b777dc5b026b0774f2ed5f0c6b72e90 Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Mon, 12 Dec 2022 17:16:16 +0900
Subject: [PATCH] Add complete page

---
 pages/complete/index.tsx                   | 180 +++++++++++++++++++++
 public/images/svg/alert-circle-outline.svg |   5 +
 public/images/svg/twitter-icon.svg         |   3 +
 styles/color.ts                            |   3 +
 4 files changed, 191 insertions(+)
 create mode 100644 pages/complete/index.tsx
 create mode 100644 public/images/svg/alert-circle-outline.svg
 create mode 100644 public/images/svg/twitter-icon.svg

diff --git a/pages/complete/index.tsx b/pages/complete/index.tsx
new file mode 100644
index 0000000..171b1ef
--- /dev/null
+++ b/pages/complete/index.tsx
@@ -0,0 +1,180 @@
+import Image from "next/image";
+
+import styled from "styled-components";
+
+import { Logo } from "../../components/logo";
+import color from "../../styles/color";
+
+import AlertCircleOutlineIcon from "../../public/images/svg/alert-circle-outline.svg";
+import TwitterIcon from "../../public/images/svg/twitter-icon.svg";
+
+export default function CompletePage() {
+  return (
+    <Container>
+      <Logo />
+
+      <MainContainer>
+        <MainTitle>Your Name is Active Now!</MainTitle>
+        <ContentContainer>
+          <RecipentContainer>
+            <RecipentTitle>Recipent</RecipentTitle>
+            <AddressContainer>kingstarcookies.cosmos</AddressContainer>
+            <AvailableAddressText>available address</AvailableAddressText>
+          </RecipentContainer>
+        </ContentContainer>
+
+        <DescriptionContainer>
+          <AlertIcon>
+            <Image src={AlertCircleOutlineIcon} fill={true} alt="alert icon" />
+          </AlertIcon>
+          <DescriptionText>
+            If you want to make that name address with same twitter account,
+            just go to home and start again.
+          </DescriptionText>
+        </DescriptionContainer>
+
+        <ShareButtonContainer>
+          <ShareButtonText>SHARE MY NAME</ShareButtonText>
+          <Image src={TwitterIcon} alt="twitter icon" />
+        </ShareButtonContainer>
+      </MainContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+`;
+
+const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding-top: 10.1rem;
+
+  color: white;
+`;
+
+const MainTitle = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 2rem;
+
+  padding: 1rem;
+`;
+
+const ContentContainer = styled.div`
+  width: 30rem;
+
+  margin-top: 1rem;
+  padding: 2rem 2rem;
+
+  background-color: ${color.grey["900"]};
+`;
+
+const RecipentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  padding: 2rem;
+`;
+
+const RecipentTitle = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1rem;
+
+  color: ${color.grey["400"]};
+`;
+
+const AddressContainer = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+
+  color: ${color.white};
+
+  padding: 1rem;
+
+  background-color: ${color.grey["600"]};
+`;
+
+const AvailableAddressText = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+
+  color: ${color.blue};
+`;
+
+const DescriptionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  gap: 1rem;
+
+  width: 30rem;
+
+  margin-top: 1.5rem;
+  padding: 1.5rem 2rem;
+
+  background-color: ${color.grey["900"]};
+`;
+
+const AlertIcon = styled.div`
+  position: relative;
+
+  width: 1.5rem;
+  height: 1.5rem;
+`;
+
+const DescriptionText = styled.div`
+  width: 100%;
+
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.8rem;
+  line-height: 0.8rem;
+
+  color: ${color.grey["400"]};
+`;
+
+const ShareButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+
+  width: 20rem;
+  height: 5rem;
+
+  margin-top: 2.5rem;
+
+  cursor: pointer;
+  user-select: none;
+
+  background-color: ${color.grey["700"]};
+`;
+
+const ShareButtonText = styled.div`
+  font-family: "Inter", serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.25rem;
+
+  color: ${color.grey["100"]};
+`;
diff --git a/public/images/svg/alert-circle-outline.svg b/public/images/svg/alert-circle-outline.svg
new file mode 100644
index 0000000..cf93031
--- /dev/null
+++ b/public/images/svg/alert-circle-outline.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21 7.03125 16.9688 3 12 3C7.03125 3 3 7.03125 3 12C3 16.9688 7.03125 21 12 21C16.9688 21 21 16.9688 21 12Z" stroke="#64646D" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M11.0007 8.03664L11.803 13.2223C11.838 13.4482 12.1634 13.4482 12.1983 13.2223L12.999 8.04535C13.0051 7.90953 12.9835 7.77388 12.9355 7.64669C12.8875 7.5195 12.814 7.40344 12.7196 7.3056C12.6252 7.20777 12.5118 7.13021 12.3864 7.07767C12.261 7.02513 12.1262 6.99872 11.9902 7.00005C11.8567 7.00135 11.7247 7.02941 11.6021 7.08256C11.4796 7.13571 11.3689 7.21287 11.2767 7.3095C11.1844 7.40612 11.1125 7.52025 11.0651 7.64514C11.0177 7.77003 10.9958 7.90315 11.0007 8.03664Z" fill="#64646D" stroke="#64646D" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17C11.8022 17 11.6089 16.9414 11.4444 16.8315C11.28 16.7216 11.1518 16.5654 11.0761 16.3827C11.0004 16.2 10.9806 15.9989 11.0192 15.8049C11.0578 15.6109 11.153 15.4327 11.2929 15.2929C11.4327 15.153 11.6109 15.0578 11.8049 15.0192C11.9989 14.9806 12.2 15.0004 12.3827 15.0761C12.5654 15.1518 12.7216 15.28 12.8315 15.4444C12.9414 15.6089 13 15.8022 13 16C13 16.2652 12.8947 16.5196 12.7071 16.7071C12.5196 16.8946 12.2652 17 12 17Z" fill="#64646D"/>
+</svg>
diff --git a/public/images/svg/twitter-icon.svg b/public/images/svg/twitter-icon.svg
new file mode 100644
index 0000000..42e39ca
--- /dev/null
+++ b/public/images/svg/twitter-icon.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.3502 7.84668C23.5894 8.18363 22.7712 8.40845 21.9081 8.51483C22.7856 7.99388 23.4606 7.163 23.7775 6.18148C22.9564 6.66275 22.0467 7.01638 21.079 7.20268C20.3062 6.3833 19.2039 5.875 17.9826 5.875C15.6366 5.875 13.7351 7.75985 13.7351 10.084C13.7351 10.4129 13.7736 10.7332 13.8461 11.0443C10.3167 10.8672 7.18641 9.1893 5.09226 6.6432C4.72426 7.26535 4.51726 7.99388 4.51726 8.76265C4.51726 10.2237 5.26534 11.51 6.40614 12.2679C5.70981 12.2466 5.05431 12.0528 4.48046 11.7423C4.48046 11.755 4.48046 11.7739 4.48046 11.7918C4.48046 13.8336 5.94499 15.5339 7.88619 15.9208C7.53141 16.018 7.15651 16.0721 6.77011 16.0721C6.49584 16.0721 6.22846 16.041 5.96971 15.9944C6.51021 17.6631 8.07824 18.8827 9.93606 18.9189C8.48246 20.0459 6.65166 20.7209 4.66101 20.7209C4.31716 20.7209 3.98079 20.7014 3.64844 20.6611C5.52926 21.852 7.76256 22.55 10.1597 22.55C17.9711 22.55 22.2445 16.1353 22.2445 10.5705C22.2445 10.3882 22.2388 10.2065 22.2301 10.0271C23.0639 9.43828 23.7826 8.69538 24.3502 7.84668Z" fill="#5081FF"/>
+</svg>
diff --git a/styles/color.ts b/styles/color.ts
index bdf9128..02e86fa 100644
--- a/styles/color.ts
+++ b/styles/color.ts
@@ -6,6 +6,8 @@ const orange = {
   400: "#442924",
 };
 
+const blue = "#536EF8";
+
 const white = "#FCFCFC";
 const grey = {
   100: "#A3A3A3",
@@ -25,6 +27,7 @@ const color = {
   white,
   black,
   orange,
+  blue,
 };
 
 export default color;