Merge pull request #3 from alserembani94/tetapan-asas

feat: Tambah halaman asas
samudradev · Jul 30, 2022 · b5e5602 · b5e5602
2 parents 0aebaa8 + 4f3b8d8
commit b5e5602
Show file tree

Hide file tree

Showing 17 changed files with 735 additions and 45 deletions.
diff --git a/components/Asas/Footer.tsx b/components/Asas/Footer.tsx
@@ -0,0 +1,15 @@
+const Header = () => (
+  <footer className="bg-white px-[32px] py-[16px] flex justify-center items-center gap-4">
+    <a
+      href="https://github.com/Thaza-Kun/samudra"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Samudra
+    </a>
+    <hr className="h-4 w-px bg-slate-300" />
+    <p>{new Date().getFullYear()}</p>
+  </footer>
+);
+
+export default Header;
diff --git a/components/Asas/Header.tsx b/components/Asas/Header.tsx
@@ -0,0 +1,71 @@
+import Image from "next/future/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+type Navigasi = {
+  id: string;
+  label: string;
+  pautan: string;
+  ikon?: React.ReactNode;
+};
+
+const navigasi: Navigasi[] = [
+  {
+    id: "halaman",
+    label: "Halaman",
+    pautan: "/",
+  },
+  {
+    id: "tentang-kami",
+    label: "Tentang Kami",
+    pautan: "/tentang-kami",
+  },
+  {
+    id: "blog",
+    label: "Blog",
+    pautan: "/blog",
+  },
+];
+
+const Header = () => {
+  const router = useRouter();
+  const currentRoute = router.asPath;
+
+  return (
+    <header className="bg-white px-[32px] py-[32px] flex justify-center">
+      <nav className="w-full flex flex-row gap-8 items-center justify-center max-w-screen-xl">
+        <Link href="/">
+          <a>
+            <Image
+              src="/logo/logo-samudra.webp"
+              alt="Logo Samudra"
+              width={120}
+              height={40}
+            />
+          </a>
+        </Link>
+        <div className="flex-1 flex flex-row gap-8 justify-end">
+          {navigasi.map((nav) => (
+            <Link href={nav.pautan} key={nav.id}>
+              <a
+                className={`p-2 font-bold border-b-4 transition-colors rounded-b
+                  hover:text-primer-hover hover:border-primer-hover
+                  focus:text-primer-hover focus:border-primer-hover
+                  ${
+                    currentRoute === nav.pautan
+                      ? "border-primer"
+                      : "border-transparent text-primer"
+                  }
+                `}
+              >
+                {nav.label}
+              </a>
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/components/Borang/Input.tsx b/components/Borang/Input.tsx
@@ -0,0 +1,29 @@
+interface InputProps {
+  label: string;
+  error?: string;
+}
+
+const Input: React.FC<
+  InputProps & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ label, error, ...props }) => {
+  const friendlyId = encodeURIComponent(label);
+  return (
+    <div className="flex flex-col w-full gap-4 items-stretch">
+      <label
+        htmlFor={friendlyId}
+        className="text-zinc-700 w-32 text-left hidden"
+      >
+        {label}
+      </label>
+      <input
+        id={friendlyId}
+        className="border border-zinc-300 rounded-lg px-4 py-2 flex-1"
+        placeholder={label}
+        {...props}
+      />
+      {error && <p className="text-ps4-text-alert">{error}</p>}
+    </div>
+  );
+};
+
+export default Input;
diff --git a/components/Meta.tsx b/components/Meta.tsx
@@ -0,0 +1,44 @@
+import Head from "next/head";
+
+interface Props {
+  tajuk?: string;
+  huraian?: string;
+  urlGambar?: string;
+}
+
+const tajukLalai = "";
+const huraianLalai = "";
+const namaLaman = "Laman Samudra";
+
+const Meta: React.FC<Props> = ({
+  tajuk = tajukLalai,
+  huraian = huraianLalai,
+  urlGambar = "",
+}) => (
+  <Head>
+    {/* Tetapan Asas */}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charSet="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+
+    {/* Informasi Asas */}
+    <title>{tajuk}</title>
+    <meta name="description" content={huraian} />
+
+    {/* Open Graph */}
+    <meta property="og:title" content={tajuk} />
+    <meta property="og:description" content={huraian} />
+    <meta property="og:image" content={urlGambar} />
+    <meta property="og:site_name" content={namaLaman} />
+
+    {/* Twitter */}
+    <meta property="twitter:card" content="summary_large_image" key="twcard" />
+    <meta property="twitter:title" content={tajuk} />
+    <meta property="twitter:description" content={huraian} />
+    <meta property="twitter:image" content={urlGambar} />
+    <meta property="twitter:site" content="@MakmalThaza" />
+    <meta property="twitter:creator" content="@MakmalThaza" key="twhandle" />
+  </Head>
+);
+
+export default Meta;
diff --git a/layouts/AturanLalai.tsx b/layouts/AturanLalai.tsx
@@ -0,0 +1,47 @@
+/**
+ * @description Komponen ini (sahaja) tidak boleh memproses `className` Tailwind
+ * kerana komponen ini dirender sebelum penghasilan kelas Tailwind 😅.
+ * Maka, perlu guna CSS-in-JS
+ */
+
+import Header from "components/Asas/Header";
+import Footer from "components/Asas/Footer";
+import Meta from "components/Meta";
+
+interface Props {
+  children: React.ReactNode;
+  tajuk?: string;
+  huraian?: string;
+}
+
+const AturanLalai: React.FC<Props> = ({ children, tajuk, huraian }) => (
+  <div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "center",
+      minHeight: "100vh",
+    }}
+  >
+    <Meta
+      tajuk={tajuk || "Laman Samudra"}
+      huraian={huraian || "Sebuah sesawang pengistilahan dan pengongsian."}
+    />
+    <Header />
+
+    <main
+      style={{
+        flex: 1,
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      {children}
+    </main>
+
+    <Footer />
+  </div>
+);
+
+export default AturanLalai;
diff --git a/lottie/community.json b/lottie/community.json
diff --git a/lottie/project.json b/lottie/project.json
diff --git a/next.config.js b/next.config.js
@@ -2,6 +2,11 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  experimental: {
+    images: {
+      allowFutureImage: true,
+    },
+  },
 }
 
 module.exports = nextConfig
diff --git a/package.json b/package.json
@@ -10,18 +10,27 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.8",
+    "axios": "^0.27.2",
+    "formik": "^2.2.9",
+    "lottie-react": "^2.3.1",
     "next": "12.2.3",
     "postcss": "^8.4.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "^3.1.7"
+    "react-icons": "^4.4.0",
+    "react-modal": "^3.15.1",
+    "swr": "^1.3.0",
+    "tailwindcss": "^3.1.7",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/node": "18.6.2",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
+    "@types/react-modal": "^3.13.1",
     "eslint": "8.20.0",
     "eslint-config-next": "12.2.3",
+    "prettier": "^2.7.1",
     "typescript": "4.7.4"
   }
 }
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
diff --git a/pages/blog.tsx b/pages/blog.tsx
@@ -0,0 +1,17 @@
+import type { NextPage } from "next";
+import AturanLalai from "layouts/AturanLalai";
+
+const Blog: NextPage = () => {
+  return (
+    <AturanLalai>
+      <div className="w-full max-w-screen-xl py-4 flex flex-col">
+        <div className="px-8 py-8 rounded-md flex flex-col gap-8 items-center justify-center text-center leading-[8px]">
+          <h4>Blog</h4>
+          <h1>Samudra</h1>
+        </div>
+      </div>
+    </AturanLalai>
+  );
+};
+
+export default Blog;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,14 +1,59 @@
 import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-import styles from "../styles/Home.module.css";
+import AturanLalai from "layouts/AturanLalai";
+import Lottie from "lottie-react";
+import Input from "components/Borang/Input";
+import { useFormik } from "formik";
 
-const Home: NextPage = () => {
+import communityAnimation from "lottie/community.json";
+
+const Halaman: NextPage = () => {
+  const borangCarian = useFormik({
+    initialValues: {
+      carian: "",
+    },
+    onSubmit: (values, { resetForm }) => {
+      resetForm();
+    },
+  });
   return (
-    <div>
-      <p>Hello</p>
-    </div>
+    <AturanLalai>
+      <div className="w-full max-w-screen-xl py-4 flex flex-col">
+        <div className="px-8 py-8 rounded-md flex flex-row gap-8 justify-between">
+          <div className="flex-1 max-w-lg">
+            <p className="font-bold text-xl">Selamat datang ke</p>
+            <h1>Laman Samudra</h1>
+            <p>
+              Sebuah platform untuk pencarian pengistilahan dan perkongsian,
+              yang menggunakan enjin Samudra.
+            </p>
+
+            <form onSubmit={borangCarian.handleSubmit} className="my-4">
+              <Input
+                label="Carian"
+                name="carian"
+                value={borangCarian.values.carian}
+                onChange={borangCarian.handleChange}
+              />
+            </form>
+
+            <div className="bg-amaran text-amaran-tulisan px-4 py-2 rounded border border-amaran-tulisan">
+              <p>
+                Halaman ini masih dalam pembangunan dan di peringkat alfa, maka
+                beberapa fungsi tidak dapat digunakan buat masa ini. Terima
+                kasih kerana memahami.
+              </p>
+            </div>
+          </div>
+          <div>
+            <Lottie
+              animationData={communityAnimation}
+              style={{ width: 400, height: 400 }}
+            />
+          </div>
+        </div>
+      </div>
+    </AturanLalai>
   );
 };
 
-export default Home;
+export default Halaman;
diff --git a/pages/tentang-kami.tsx b/pages/tentang-kami.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from "next";
+import AturanLalai from "layouts/AturanLalai";
+import Lottie from "lottie-react";
+
+import projectAnimation from "lottie/project.json";
+
+const TentangKami: NextPage = () => {
+  return (
+    <AturanLalai>
+      <div className="w-full max-w-screen-xl py-4 flex flex-col">
+        <div className="px-8 py-8 rounded-md flex flex-col gap-8 items-center justify-center text-center leading-[8px]">
+          <Lottie
+            animationData={projectAnimation}
+            style={{ width: 200, height: 200 }}
+          />
+          <h4>Projek</h4>
+          <h1>Samudra</h1>
+          <p className=" leading-6 mt-4 max-w-2xl">
+            Projek ini adalah sebuah usahasama untuk memudahkan pencatatan
+            istilah serta pengongsiannya sesama rakan sekerja atau orang awam.
+            Dengan memudahkan proses ini, kita dapat menambah jumlah rujukan
+            bahasa Melayu dalam talian sekali gus mempercepatkan perkembangannya
+            dari segi penggunaan, penyelidikan serta pembelajarannya.
+          </p>
+        </div>
+      </div>
+    </AturanLalai>
+  );
+};
+
+export default TentangKami;