feat(components and RegularLink): ✨ initiate regular link (still messy)

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;

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;

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"