Update homepage

uiuxarghya · Oct 20, 2021 · b7e10fc · b7e10fc
1 parent 729ba1e
commit b7e10fc
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 36 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,48 +1,54 @@
-import { Alert, Button, Form, Input, Layout, Typography } from 'antd';
-import axios, { AxiosError } from 'axios';
-import Head from 'next/head';
-import { useState } from 'react';
-import styles from '../styles/Home.module.css';
+import { Alert, Button, Form, Input, Layout, Typography } from "antd";
+import axios, { AxiosError } from "axios";
+import Head from "next/head";
+import { useState } from "react";
+import styles from "../styles/Home.module.css";
 
 const { Header, Content, Footer } = Layout;
 const { Title } = Typography;
 
 type ShortenLinkResponse = {
   short_link: string;
-}
+};
 
 type ShortenLinkError = {
   error: string;
   error_description: string;
-}
+};
 
 type FormValues = {
   link: string;
-}
+};
 
 export default function Home() {
-  const [status, setStatus] = useState<'initial' | 'error' | 'success'>('initial');
-  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState<"initial" | "error" | "success">(
+    "initial"
+  );
+  const [message, setMessage] = useState("");
   const [form] = Form.useForm();
 
   const onFinish = async ({ link }: FormValues) => {
     try {
-      const response = await axios.post<ShortenLinkResponse>('/api/shorten_link', { link });
-      setStatus('success');
+      const response = await axios.post<ShortenLinkResponse>(
+        "/api/shorten_link",
+        { link }
+      );
+      setStatus("success");
       setMessage(response.data?.short_link);
-    }
-    catch (e) {
+    } catch (e) {
       const error = e as AxiosError<ShortenLinkError>;
-      setStatus('error');
-      setMessage(error.response?.data?.error_description || 'Something went wrong!');
+      setStatus("error");
+      setMessage(
+        error.response?.data?.error_description || "Something went wrong!"
+      );
     }
-  }
+  };
 
   const onFinishedFailed = () => {
-    setStatus('error');
-    const error = form.getFieldError('link').join(' ');
+    setStatus("error");
+    const error = form.getFieldError("link").join(" ");
     setMessage(error);
-  }
+  };
 
   return (
     <Layout>
@@ -51,42 +57,81 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Header>
-        <a href="/"><div className={styles.logo} />
-          <h1 className={styles.name}>Link Shortener</h1></a>
+        <a href="/">
+          <div className={styles.logo} />
+          <h1 className={styles.name}>Link Shortener</h1>
+        </a>
       </Header>
       <Content className={styles.content}>
         <div className={styles.shortner}>
           <Title level={5}>Paste your lengthy link</Title>
           <Form
             form={form}
             onFinish={onFinish}
-            onFinishFailed={onFinishedFailed}>
+            onFinishFailed={onFinishedFailed}
+          >
             <div className={styles.linkField}>
               <div className={styles.linkFieldInput}>
-                <Form.Item name="link" noStyle rules={[{
-                  required: true,
-                  message: 'Please paste a correct link',
-                  type: 'url',
-                }]}>
-                  <Input placeholder="https://your-long-link.com/blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah" size="large" />
+                <Form.Item
+                  name="link"
+                  noStyle
+                  rules={[
+                    {
+                      required: true,
+                      message: "Please paste a correct link",
+                      type: "url",
+                    },
+                  ]}
+                >
+                  <Input
+                    placeholder="https://your-long-link.com/blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah-blah"
+                    size="large"
+                  />
                 </Form.Item>
               </div>
               <div className={styles.linkFieldButton}>
                 <Form.Item>
-                  <Button type="primary" htmlType="submit" style={{ width: '100%' }} size="large">
+                  <Button
+                    className={styles.submitButton}
+                    type="primary"
+                    htmlType="submit"
+                    style={{ width: "100%" }}
+                    size="large"
+                  >
                     Shorten!
                   </Button>
                 </Form.Item>
               </div>
             </div>
           </Form>
           <Title level={5}>Copy shortened link</Title>
-          {['error', 'success'].includes(status) && (<Alert showIcon message={message} type={status as 'error' | 'success'} />)}
+          {["error", "success"].includes(status) && (
+            <Alert
+              showIcon
+              message={message}
+              type={status as "error" | "success"}
+            />
+          )}
         </div>
       </Content>
       <Footer className={styles.footer}>
-        <a className={styles.link} href="https://uiuxarghya.netlify.app" target="_blank">uiuxarghya</a> | 8bits Link Shortener &copy; 2021
+        <a
+          className={styles.link}
+          href="https://uiuxarghya.vercel.app"
+          target="_blank"
+        >
+          Arghya Ghosh
+        </a>{" "}
+        aka{" "}
+        <a
+          className={styles.link}
+          href="https://twitter.com/uiuxarghya"
+          target="_blank"
+        >
+          @uiuxarghya
+        </a>{" "}
+        | 8bits Link Shortener &copy; 2021
       </Footer>
     </Layout>
-  )
-}
+  );
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -16,6 +16,12 @@
   min-height: calc(100vh - 64px - 70px);
 }
 
+@media only screen and (max-width: 400px) {
+  .content {
+    padding: 0 20px;
+  }
+}
+
 .shortner {
   width: 100%;
   background: #fff;
@@ -32,12 +38,17 @@
 .linkFieldInput {
   flex: 100%;
   margin-right: 5px;
+  border-radius: 20px;
 }
 
 .linkFieldButton {
   width: 120px;
 }
 
+.submitButton:hover {
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+}
+
 .footer {
   background: #001529;
   text-align: center;
@@ -47,5 +58,5 @@
   color: #00dd9b;
 }
 .link:hover {
-  color:#ff7875;
-}
+  color: #ff7875;
+}