🎉 initial commit

dikisiswanto · Sep 16, 2020 · d54e1de · d54e1de
1 parent cb7c9c7
commit d54e1de
Show file tree

Hide file tree

Showing 46 changed files with 5,623 additions and 352 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,29 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "airbnb"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off",
+        "jsx-a11y/anchor-is-valid": "off",
+        "react/prop-types": "off"
+    },
+    "globals": {
+        "React": "writable"
+    }
+}
diff --git a/components/footer.jsx b/components/footer.jsx
@@ -0,0 +1,15 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="bg-white text-gray-800 text-center py-3 px-4 bg-white mt-12">
+      <div className="container text-sm">
+        Dibuat oleh:
+        {' '}
+        <Link href="https://github.com/dikisiswanto">
+          <a className="text-teal-700" target="_blank" rel="noopener noreferrer">Diki Siswanto</a>
+        </Link>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/header.jsx b/components/header.jsx
@@ -0,0 +1,27 @@
+import Head from 'next/head';
+import Link from 'next/link';
+import Nav from './nav';
+import app from '../data/app.json';
+
+export default function Header() {
+  return (
+    <>
+      <Head>
+        <title>{app.name}</title>
+      </Head>
+      <header className="px-3 shadow border border-gray-300 z-10 bg-white sticky top-0">
+        <div className="container flex flex-col lg:flex-row items-center justify-between">
+          <h1 className="font-bold text-xl tracking-wider pt-3 pb-1 lg:pb-3">
+            <Link href="/">
+              <a className="flex text-teal-700">
+                <img src="/quranku.svg" alt="Quranku Logo" className="w-5 h-auto mr-2" />
+                {app.name}
+              </a>
+            </Link>
+          </h1>
+          <Nav />
+        </div>
+      </header>
+    </>
+  );
+}
diff --git a/components/nav.jsx b/components/nav.jsx
@@ -0,0 +1,16 @@
+import Link from 'next/link';
+import { navs } from '../data/navs.json';
+
+export default function Nav() {
+  return (
+    <>
+      <nav>
+        <ul className="flex justify-between items-center gap-x-6">
+          {navs.map((nav) => (
+            <li key={nav.id}><Link href={nav.path}><a className="inline-block py-3 px-3 text-teal-900 hover:text-teal-600 transition duration-200">{nav.name}</a></Link></li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  );
+}
diff --git a/components/surah.jsx b/components/surah.jsx
@@ -0,0 +1,17 @@
+export default function Surah({ data, index }) {
+  return (
+    <div className="shadow-sm hover:shadow-md transition duration-300 border border-gray-300 rounded-md py-5 px-4 my-3 bg-white flex items-start justify-between">
+      <span className="bg-teal-700 text-white inline-block py-1 px-2 rounded-lg mr-3 text-sm">{index}</span>
+      <div className="text-right">
+        <span className="block text-arabic text-black text-2xl" dir="rtl" lang="ar">{data.name.short}</span>
+        <span className="block">{data.name.transliteration.id}</span>
+        <span className="block text-gray-700 text-sm">
+          {data.name.translation.id}
+          {' - '}
+          {data.numberOfVerses}
+          {' ayat '}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/verse.jsx b/components/verse.jsx
@@ -0,0 +1,11 @@
+export default function Verse({ verse }) {
+  return (
+    <div className="relative shadow-sm border border-gray-300 rounded-md py-5 px-4 my-3 bg-white overflow-hidden">
+      <span className="absolute top-0 left-0 bg-teal-700 text-white inline-block py-1 px-2 mr-1 text-sm">{verse.number.inSurah}</span>
+      <div className="mt-3">
+        <span className="block text-arabic text-black text-2xl py-1 px-2" dir="rtl" lang="ar">{verse.text.arab}</span>
+        <span className="block text-gray-700 py-1 px-2 text-left">{verse.translation.id}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/data/app.json b/data/app.json
@@ -0,0 +1,5 @@
+{
+	"name": "Quranku",
+	"description": "Quranku adalah mini web project yang dibangun dengan NextJS dan tailwindcss",
+	"theme_color": "#2f855a"
+}
diff --git a/data/constants.js b/data/constants.js
@@ -0,0 +1,5 @@
+const CONSTANTS = {
+  API_BASE_URL: 'https://api.quran.sutanlab.id',
+};
+
+export default CONSTANTS;
diff --git a/data/navs.json b/data/navs.json
@@ -0,0 +1,19 @@
+{
+	"navs": [
+		{
+			"id": 1,
+			"name": "Beranda",
+			"path": "/"
+		},
+		{
+			"id": 2,
+			"name": "Daftar Surat",
+			"path": "/surah"
+		},
+		{
+			"id": 3,
+			"name": "Tentang",
+			"path": "/about"
+		}
+	]
+}
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,7 @@
+const withPWA = require('next-pwa');
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+  },
+});