From 9c3a1ea7efcd97acbbb41c64606f6d324e7397d8 Mon Sep 17 00:00:00 2001
From: yehezkielgunawan <yehezkiel.gunawan@student.umn.ac.id>
Date: Tue, 1 Feb 2022 19:25:32 +0700
Subject: [PATCH] feat(components and RegularLink): :sparkles: initiate regular
 link (still messy)

---
 src/components/links/RegularLink.tsx | 43 ++++++++++++++++++++++++++++
 src/pages/components.tsx             | 21 ++++++++++++++
 src/pages/index.tsx                  | 21 ++++++++++++--
 3 files changed, 83 insertions(+), 2 deletions(-)
 create mode 100644 src/components/links/RegularLink.tsx
 create mode 100644 src/pages/components.tsx

diff --git a/src/components/links/RegularLink.tsx b/src/components/links/RegularLink.tsx
new file mode 100644
index 0000000..2f848a4
--- /dev/null
+++ b/src/components/links/RegularLink.tsx
@@ -0,0 +1,43 @@
+import clsx from "clsx";
+import Link, { LinkProps } from "next/link";
+import React from "react";
+
+type RegularLinkProps = {
+  href: string;
+  children: React.ReactNode;
+  isOpenNewTab?: boolean;
+  className?: string;
+  nextLinkProps?: Omit<LinkProps, "href">;
+} & React.ComponentPropsWithRef<"a">;
+
+const RegularLink = ({
+  href,
+  children,
+  isOpenNewTab,
+  className,
+  nextLinkProps,
+}: RegularLinkProps) => {
+  const isNewTab =
+    isOpenNewTab !== undefined
+      ? (isOpenNewTab = true)
+      : href && !href.startsWith("/") && !href.startsWith("#");
+  if (isNewTab) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+        className={clsx("cursor-ne-resize", className)}
+      >
+        {children}
+      </a>
+    );
+  }
+  return (
+    <Link href={href} {...nextLinkProps}>
+      <a className={className}>{children}</a>
+    </Link>
+  );
+};
+
+export default RegularLink;
diff --git a/src/pages/components.tsx b/src/pages/components.tsx
new file mode 100644
index 0000000..5fc6493
--- /dev/null
+++ b/src/pages/components.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import RegularLink from "@/components/links/RegularLink";
+import Layout from "@/layouts/Layout";
+
+const Components = () => {
+  return (
+    <Layout>
+      <main className="flex flex-col gap-3">
+        <h1>Reusable Components</h1>
+        <h3>Regular Link</h3>
+        <div className="flex flex-row gap-3">
+          <RegularLink href="/">Internal Link</RegularLink>
+          <RegularLink href="https://yehezgun.com">External Link</RegularLink>
+        </div>
+      </main>
+    </Layout>
+  );
+};
+
+export default Components;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bc7285e..056fe14 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { NextPage } from "next";
 import Image from "next/image";
+import Link from "next/link";
 import { AiFillGithub } from "react-icons/ai";
 import { SiNetlify, SiVercel } from "react-icons/si";
 
@@ -10,7 +11,7 @@ const Home: NextPage = () => {
   return (
     <Layout>
       <main className="flex flex-col gap-3">
-        <h1 className="text-3xl font-bold underline">Hello World!</h1>
+        <h1 className="underline">Hello World!</h1>
         <p
           className={clsx(
             "bg-gray-200 dark:bg-gray-700",
@@ -20,7 +21,7 @@ const Home: NextPage = () => {
           This is just a starter template, made using Next.js + Typescript +
           Tailwind CSS.
         </p>
-        <figure className="my-4 flex animate-bounce content-center justify-center py-3">
+        <figure className="my-4 flex animate-spin content-center justify-center py-3">
           <Image
             src="https://assets.vercel.com/image/upload/v1607554385/repositories/next-js/next-logo.png"
             alt="Next.jsLogo"
@@ -69,6 +70,22 @@ const Home: NextPage = () => {
             Use This Template
           </button>
         </a>
+        <Link href="/components" passHref>
+          <button
+            type="button"
+            className={clsx(
+              "py-2 px-4",
+              "border-2 border-black dark:border-white",
+              "text-black dark:text-white",
+              "hover:bg-gray-400 dark:hover:bg-gray-700",
+              "w-full transition duration-200 ease-in focus:ring-gray-500 focus:ring-offset-gray-200",
+              "text-center text-base font-semibold",
+              "rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+            )}
+          >
+            See Components
+          </button>
+        </Link>
         <div className="flex flex-wrap items-center justify-center gap-3">
           <a
             href="https://github.com/yehezkielgunawan/yehez-nexttailwind-starter"