feat(apps.web): add Body, FormInput, Header, and TabSelector

Signed-off-by: GitHub <noreply@github.com>

apps/web/components/Body.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * Body Component.
+ * @param {{children: JSX.Element}} param0 BodyComponent props.
+ * @return {JSX.Element}
+ */
+export const BodyComponent = ({
+    children,
+}: {
+    children: JSX.Element;
+}): JSX.Element => {
+    return (
+        <React.Fragment>
+            <section className="min-h-screen bg-light-200">
+                <div className="md:container md:mx-auto">{children}</div>
+            </section>
+        </React.Fragment>
+    );
+};

apps/web/components/FormInput.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+/**
+ * FormInput Component.
+ * @return {JSX.Element}
+ */
+export const FormInputComponent = (): JSX.Element => {
+    const [url, setUrl] = React.useState('');
+
+    return (
+        <React.Fragment>
+            <section className="inline-block">
+                <h1 className="text-lg leading-relaxed">
+                    Fill TikTok's Video URL below:
+                </h1>
+                <form
+                    target="#"
+                    className="flex flex-col md:flex-row"
+                    onSubmit={() => {}}
+                >
+                    <div>
+                        <input
+                            type="url"
+                            onChange={(event) => setUrl(event.target.value)}
+                            value={url}
+                            className="p-3 border border-gray-300 font-sans h-auto w-auto outline-solid-blue-500"
+                        />
+                    </div>
+
+                    <div>
+                        <button
+                            type="button"
+                            className="p-3 ml-2 bg-sky-400 uppercase text-white"
+                        >
+                            download
+                        </button>
+                    </div>
+                </form>
+            </section>
+        </React.Fragment>
+    );
+};
+
+export default FormInputComponent;

apps/web/components/Header.tsx

@@ -0,0 +1,36 @@
+/**
+ * Next Head Component.
+ * @param {{title: string, children: JSX.Element }} param0 NextHeadComponent args.
+ * @return {JSX.Element}
+ */
+export const NextHeadComponent = ({
+    title,
+    children,
+}: {
+    title?: string;
+    children?: JSX.Element;
+}): JSX.Element => {
+    return (
+        <>
+            <title>{title ?? 'TikTok Downloader'}</title>
+            <meta
+                name="title"
+                content="TikTok Downloader | Non&Watermark Support"
+            />
+            <meta
+                name="description"
+                content="An Open-Source Project where it could download TikTok's Video without annoying ads!"
+            />
+            <meta
+                name="keywords"
+                content="tiktok-downloader, tiktokdl, tiktok, download video tiktok, tiktok no watermark"
+            />
+            <meta
+                name="author"
+                content="Hanif Dwy Putra S <github.com/hansputera>"
+            />
+            <meta name="robots" content="index, follow" />
+            {children}
+        </>
+    );
+};

apps/web/components/TabSelector.tsx

@@ -0,0 +1,42 @@
+import React, {ComponentType} from 'react';
+
+type TabPage = {
+    name: string;
+    component: ComponentType;
+};
+
+/**
+ *
+ * @param {{tabs: TabPage[]}} param0 TabSelector props.
+ * @return {JSX.Element}
+ */
+export const TabSelectorComponent = ({
+    tabs,
+}: {
+    tabs: TabPage[];
+}): JSX.Element => {
+    const [tab, setTab] = React.useState<TabPage>();
+
+    return (
+        <>
+            <ul className="flex flex-col md:flex-row flex-grow">
+                {tabs.map((tabPage) => (
+                    <>
+                        <li className="list-none">
+                            <a
+                                href={'#tab-'.concat(
+                                    tabPage.name.toLowerCase(),
+                                )}
+                                onClick={() => setTab(tabPage)}
+                            >
+                                {tabPage.name}
+                            </a>
+                        </li>
+                        <span className="ml-3 mr-3">|</span>
+                    </>
+                ))}
+            </ul>
+            {tab ? tab.component : <></>}
+        </>
+    );
+};

apps/web/pages/_document.tsx

@@ -0,0 +1,28 @@
+import Document, {Head, Html, Main, NextScript} from 'next/document';
+import {BodyComponent} from '../components/Body';
+import {NextHeadComponent} from '../components/Header';
+
+/**
+ * @class TikTokDocument
+ */
+export default class TikTokDocument extends Document {
+    /**
+     * Render TikTokDocument
+     * @return {JSX.Element}
+     */
+    render(): JSX.Element {
+        return (
+            <Html lang="en">
+                <Head>
+                    <NextHeadComponent />
+                </Head>
+                <body>
+                    <BodyComponent>
+                        <Main />
+                    </BodyComponent>
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}

apps/web/pages/index.tsx

@@ -1,40 +1,34 @@
-import Head from 'next/head';
+import dynamic from 'next/dynamic';
+import {TabSelectorComponent} from '../components/TabSelector';
 
 export default () => {
     return (
-        <>
-            <Head>
-                <title>TikTok Downloader</title>
-            </Head>
-            {/**
-			Body
-		*/}
-            <div>
-                {/** Header 1*/}
-                <div className="mt-5">
-                    <h1 className="font-mono text-center text-4xl">
-                        TikTok Downloader
-                    </h1>
-                    <p className="font-mono text-center text-xl">
-                        Free, and open-source TikTok Video Downloader
-                    </p>
-                </div>
+        <section className="p-5">
+            <h1 className="align-middle text-4xl font-sans font-medium tracking-wide leading-relaxed">
+                TikTok-DL{' '}
+                <span className="font-normal md:break-words text-2xl">
+                    Download TikTok Video without watermark and free ads.
+                </span>
+            </h1>
 
-                {/** Content */}
-                <div className="mt-3">
-                    <pre className="text-xl text-center">
-                        Hello, this page is still in development. Do you want to
-                        help me? Visit{' '}
-                        <a
-                            className="text-blue-500"
-                            href="https://github.com/hansputera/tiktok-dl"
-                        >
-                            github.com/hansputera/tiktok-dl
-                        </a>
-                        . Thanks!
-                    </pre>
-                </div>
-            </div>
-        </>
+            <TabSelectorComponent
+                tabs={[
+                    {
+                        name: 'Download',
+                        component: dynamic(
+                            () => import('../components/FormInput'),
+                            {
+                                loading: () => (
+                                    <p className="font-sans antiliased text-center">
+                                        Wait a minute!
+                                    </p>
+                                ),
+                                ssr: false,
+                            },
+                        ),
+                    },
+                ]}
+            />
+        </section>
     );
 };