13 | {name} 14 |
15 | 16 | Total {available} 17 | 18 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | export default ChapterWrapper;
16 |
--------------------------------------------------------------------------------
/src/components/Hadith/HadithReader/HadithReader.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import InitialHadithData from './InitialHadithData';
3 | import DynamicHadithsData from './DynamicHadithData';
4 |
5 | type Props = {
6 | id: string;
7 | available: number;
8 | hadiths: {
9 | id: string;
10 | number: number;
11 | arab: string;
12 | }[];
13 | };
14 |
15 | const HadithReader = ({ hadiths, available, id }: Props) => {
16 | return (
17 |
18 |
21 | );
22 | };
23 |
24 | export default HadithReader;
25 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/loading.tsx:
--------------------------------------------------------------------------------
1 | import ChapterBannerSkeleton from "@components/Banner/ChapterBannerSkeleton";
2 | import Wrapper from "@components/Wrapper";
3 | import VerseSkeleton from "@components/quranReader/VerseSkeleton";
4 | import React from "react";
5 |
6 | const Loading = () => {
7 | return (
8 |
7 |
17 | )
18 | }
19 |
20 | export default ChapterBannerSkeleton
--------------------------------------------------------------------------------
/src/components/icons/InfoIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | type InfoIconProps = {
4 | className?: string;
5 | onClick?: () => void;
6 | };
7 |
8 | const InfoIcon = ({ className, onClick }: InfoIconProps) => {
9 | return (
10 |
23 | );
24 | };
25 |
26 | export default InfoIcon;
27 |
--------------------------------------------------------------------------------
/src/components/AudioPlayer/PlayAudioButton.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import { PlayIcon } from '../icons';
5 | import useQuranReader from '@stores/quranReaderStore';
6 |
7 | const PlayAudioButton = ({ surahId }: { surahId: string }) => {
8 | const { setAudioId } = useQuranReader((state) => ({
9 | setAudioId: state.setAudioId,
10 | }));
11 |
12 | return (
13 |
19 | );
20 | };
21 |
22 | export default PlayAudioButton;
23 |
--------------------------------------------------------------------------------
/src/components/chapters/Card/ChapterCardSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Skeleton from '../../Skeleton/Skeleton';
3 |
4 | const ChapterCardSkeleton = () => {
5 | return (
6 |
8 |
11 |
16 | 11 |
12 |
15 |
7 |
18 | );
19 | };
20 |
21 | export default ChapterCardSkeleton;
22 |
--------------------------------------------------------------------------------
/src/app/~offline/page.tsx:
--------------------------------------------------------------------------------
1 | import { Metadata } from 'next';
2 | import React from 'react';
3 |
4 | type Props = {};
5 |
6 | export const metadata: Metadata = {
7 | title: '~ Anda sedang offline',
8 | robots: 'noindex,nofollow',
9 | };
10 |
11 | const OfflineFallback = (props: Props) => {
12 | return (
13 |
8 |
14 |
10 |
13 |
15 |
17 |
15 | Anda sedang offline
16 | Silakan cek koneksi internet Anda.
17 |
18 |
12 | {chapterLists.map((e) => (
13 |
22 | );
23 | };
24 |
25 | export default Chapters;
26 |
--------------------------------------------------------------------------------
/src/components/Bookmark/BookmarkedItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 |
4 | type BookmarkedItemProps = {
5 | name_simple: string;
6 | verse_key: string;
7 | };
8 |
9 | const BookmarkedItem = ({ name_simple, verse_key }: BookmarkedItemProps) => {
10 | const verseKey = verse_key.split(":");
11 |
12 | return (
13 |
17 | {name_simple}
18 | {verse_key}
19 |
20 | );
21 | };
22 |
23 | export default BookmarkedItem;
24 |
--------------------------------------------------------------------------------
/src/components/Header/ChapterHeader.tsx:
--------------------------------------------------------------------------------
1 | // import React from 'react';
2 | // // import DropdownSurahLists from '../TopBar/DropdownSurahLists/DropdownSurahLists';
3 | // import DeveloperUtility from '../TopBar/DeveloperUtility/DeveloperUtility';
4 | // import classNames from 'classnames';
5 |
6 | // const ChapterHeader = () => {
7 | // return (
8 | //
13 | // {/*
16 | // );
17 | // };
18 |
19 | // export default ChapterHeader;
20 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # PWA
35 | **/public/precache.*.*.js
36 | **/public/sw.js
37 | **/public/workbox-*.js
38 | **/public/worker-*.js
39 | **/public/fallback-*.js
40 | **/public/precache.*.*.js.map
41 | **/public/sw.js.map
42 | **/public/workbox-*.js.map
43 | **/public/worker-*.js.map
44 | **/public/fallback-*.js
45 |
46 |
47 | # .vscode
48 | .vscode
--------------------------------------------------------------------------------
/src/components/icons/StarIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const StarIcon = ({className}) => {
4 | return (
5 |
8 |
9 | )
10 | }
11 |
12 | export default StarIcon
--------------------------------------------------------------------------------
/src/components/quranReader/InitialSurahVerse.tsx:
--------------------------------------------------------------------------------
1 | import { Verse } from '@utils/types/Verse';
2 | import React from 'react';
3 | import Verses from './Verses';
4 | import ScrollToAyah from './ScrollToAyah';
5 |
6 | type Props = {
7 | versesData: Verse[];
8 | };
9 |
10 | const InitialSurahVerse = ({ versesData }: Props) => {
11 | return (
12 | <>
13 |
9 | //
10 | //
19 | //
14 | //
17 | // Klik untuk melanjutkan
18 | // Al - Fatiha
15 | //Surah No. 1
16 | //
10 | //
13 | // )
14 | // }
15 |
16 | // export default Switcher
17 |
--------------------------------------------------------------------------------
/src/utils/tafsir.ts:
--------------------------------------------------------------------------------
1 | // export const getSingleTafsir = async (verseKey, lang) => {
2 | // //for now only support english and indonesian
3 | // if(lang === 'id'){
4 | // const response = await fetch(`https://quran.kemenag.go.id/api/v1/tafsirbyayat/${verseKey}`)
5 | // const data = await response.json()
6 | // return data
7 | // }
8 | // const response = await fetch(`https://api.qurancdn.com/api/qdc/tafsirs/en-tafisr-ibn-kathir/by_ayah/${verseKey}?locale=en&mushaf=7`)
9 | // const data = await response.json()
10 | // return data
11 | // }
12 |
13 | import { Tafsir } from './types/Tafsir';
14 |
15 | export const getTafsirByVerseId = async (verseId: number): Promise setReadMode('translated')} className={classNames("px-3 rounded z-20 cursor-pointer text-sm lg:text-base", {"bg-emerald-200/40": readMode == 'translated'})}>Terjemah
11 | // setReadMode('read')} className={classNames("px-3 rounded z-20 cursor-pointer text-sm lg:text-base", {"bg-emerald-200/40": readMode === 'read'})}>Baca
12 | //
15 |
25 | );
26 | };
27 |
28 | export default NotFound;
29 |
--------------------------------------------------------------------------------
/src/components/quranReader/ScrollToAyah.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useParams, useSearchParams } from 'next/navigation';
4 | import React, { useEffect } from 'react';
5 |
6 | const ScrollToAyah = () => {
7 | const searchParams = useSearchParams();
8 | const params = useParams();
9 |
10 | useEffect(() => {
11 | if (!searchParams.has('ayah')) return;
12 | const ayah = searchParams.get('ayah');
13 | if (Number(ayah) > 20) return;
14 | const verseElement = document.querySelector(
15 | `[data-verse="${params.chapterId}:${ayah}"]`
16 | ) as HTMLElement;
17 |
18 | if (!verseElement) return;
19 |
20 | verseElement.scrollIntoView({
21 | behavior: 'smooth',
22 | block: 'center',
23 | inline: 'center',
24 | });
25 | // eslint-disable-next-line react-hooks/exhaustive-deps
26 | }, [searchParams]);
27 | return <>;
28 | };
29 |
30 | export default ScrollToAyah;
31 |
--------------------------------------------------------------------------------
/src/components/chapters/Card/JuzWrapper.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 |
4 | type JuzWrapperProps = {
5 | children: React.ReactNode;
6 | juz_number: number;
7 | };
8 |
9 | const JuzWrapper = ({ children, juz_number }: JuzWrapperProps) => {
10 | return (
11 | 16 | Data tidak ditemukan 17 |
18 | 19 |
20 |
23 |
24 |
12 |
22 | );
23 | };
24 |
25 | export default JuzWrapper;
26 |
--------------------------------------------------------------------------------
/src/components/Hadith/HadithCard.tsx:
--------------------------------------------------------------------------------
1 | import ChapterWrapper from '@components/chapters/Card/ChapterWrapper';
2 | import { StarIcon } from '@components/icons';
3 | import Link from 'next/link';
4 | import React from 'react';
5 |
6 | type Props = {
7 | name: string;
8 | available: number;
9 | id: string;
10 | };
11 |
12 | const HadithCard = ({ name, id, available }: Props) => {
13 | return (
14 |
15 |
13 |
17 | Juz {juz_number}
18 |
19 | {children}
20 |
21 |
17 | {available}
18 |
20 |
21 |
22 | {name}
23 |
24 |
25 |
15 |
28 | );
29 | };
30 |
31 | export default Header;
32 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/[chapterId]/[ayahId]/layout.tsx:
--------------------------------------------------------------------------------
1 | import Wrapper from "@components/Wrapper";
2 | import { ArrowIcon } from "@components/icons";
3 | import Link from "next/link";
4 | import React from "react";
5 |
6 | type Props = {
7 | children: React.ReactNode;
8 | params: {
9 | chapterId: string;
10 | ayahId: string;
11 | };
12 | };
13 |
14 | const SpecificAyahLayout = ({ children, params }: Props) => {
15 | return (
16 |
16 |
26 | {search}
27 | 22 | {children} 23 |
24 |
18 |
22 |
26 | {children}
27 |
7 |
20 | );
21 | };
22 |
23 | export default TafsirSkeleton;
24 |
--------------------------------------------------------------------------------
/src/components/icons/LoadingIcon/AnimatedLoadingIcon.module.css:
--------------------------------------------------------------------------------
1 | @keyframes ldio-f74bbihe7ji {
2 | 0% { transform: rotate(0deg) }
3 | 50% { transform: rotate(180deg) }
4 | 100% { transform: rotate(360deg) }
5 | }
6 | .ldio_f74bbihe7ji div {
7 | position: absolute;
8 | animation: ldio-f74bbihe7ji 1.1500000000000001s linear infinite;
9 | width: 62px;
10 | height: 62px;
11 | top: 19px;
12 | left: 19px;
13 | border-radius: 50%;
14 | box-shadow: 0 2.8000000000000003px 0 0 #1d0e0b;
15 | transform-origin: 31px 32.4px;
16 | }
17 | .loadingio_spinner_eclipse_4juan662yhp {
18 | width: 35px;
19 | height: 35px;
20 | display: inline-block;
21 | overflow: hidden;
22 | background: transparent;
23 | }
24 | .ldio_f74bbihe7ji {
25 | width: 100%;
26 | height: 100%;
27 | position: relative;
28 | transform: translateZ(0) scale(0.36);
29 | backface-visibility: hidden;
30 | transform-origin: 0 0; /* see note above */
31 | }
32 | .ldio_f74bbihe7ji div { box-sizing: content-box; }
33 | /* generated by https://loading.io/ */
--------------------------------------------------------------------------------
/data/hadith/hadith.json:
--------------------------------------------------------------------------------
1 | {
2 | "data": [
3 | {
4 | "name": "HR. Abu Daud",
5 | "id": "abu-daud",
6 | "available": 4419
7 | },
8 | {
9 | "name": "HR. Ahmad",
10 | "id": "ahmad",
11 | "available": 4305
12 | },
13 | {
14 | "name": "HR. Bukhari",
15 | "id": "bukhari",
16 | "available": 6638
17 | },
18 | {
19 | "name": "HR. Darimi",
20 | "id": "darimi",
21 | "available": 2949
22 | },
23 | {
24 | "name": "HR. Ibnu Majah",
25 | "id": "ibnu-majah",
26 | "available": 4285
27 | },
28 | {
29 | "name": "HR. Malik",
30 | "id": "malik",
31 | "available": 1587
32 | },
33 | {
34 | "name": "HR. Muslim",
35 | "id": "muslim",
36 | "available": 4930
37 | },
38 | {
39 | "name": "HR. Nasai",
40 | "id": "nasai",
41 | "available": 5364
42 | },
43 | {
44 | "name": "HR. Tirmidzi",
45 | "id": "tirmidzi",
46 | "available": 3625
47 | }
48 | ]
49 | }
50 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quran-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@ducanh2912/next-pwa": "^9.0.1",
13 | "@vercel/og": "^0.5.8",
14 | "classnames": "^2.3.2",
15 | "framer-motion": "^10.12.10",
16 | "next": "14.1.3",
17 | "next-seo": "^6.0.0",
18 | "prettier": "^2.8.8",
19 | "query-string": "^8.1.0",
20 | "react": "18.2.0",
21 | "react-dom": "18.2.0",
22 | "react-hot-toast": "^2.4.1",
23 | "react-virtuoso": "^4.6.2",
24 | "zustand": "^4.3.8"
25 | },
26 | "devDependencies": {
27 | "@types/node": "^20.3.0",
28 | "@types/react": "18.2.6",
29 | "@types/react-dom": "^18.2.22",
30 | "autoprefixer": "^10.4.14",
31 | "eslint": "8.40.0",
32 | "eslint-config-next": "14.1.3",
33 | "postcss": "^8.4.23",
34 | "tailwindcss": "^3.3.2",
35 | "typescript": "^5.1.3"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "strict": false,
12 | "forceConsistentCasingInFileNames": true,
13 | "noEmit": true,
14 | "incremental": true,
15 | "esModuleInterop": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "jsx": "preserve",
21 | "plugins": [
22 | {
23 | "name": "next"
24 | }
25 | ],
26 | "baseUrl": ".",
27 | "paths": {
28 | "@components/*": ["./src/components/*"],
29 | "@utils/*": ["./src/utils/*"],
30 | "@stores/*": ["./src/store/*"],
31 | "@hooks/*": ["./src/hooks/*"],
32 | }
33 | },
34 | "include": [
35 | "next-env.d.ts",
36 | ".next/types/**/*.ts",
37 | "**/*.ts",
38 | "**/*.tsx",
39 | ],
40 | "exclude": [
41 | "node_modules"
42 | ]
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Switch/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 |
4 | type QuranSwitchProps = {
5 | active: string;
6 | };
7 |
8 | const QuranSwitch = ({ active }: QuranSwitchProps) => {
9 | return (
10 |
11 |
18 | Chapters
19 |
20 |
27 | Juzs
28 |
29 |
34 |
35 | );
36 | };
37 |
38 | export default QuranSwitch;
39 |
--------------------------------------------------------------------------------
/src/components/icons/index.ts:
--------------------------------------------------------------------------------
1 | import HistoryIcon from './HistoryIcon'
2 | import CopyIcon from './CopyIcon'
3 | import InfoIcon from './InfoIcon'
4 | import StarIcon from './StarIcon'
5 | import BookmarkIcon from './BookmarkIcon'
6 | import AdjustmentIcon from './AdjustmentIcon'
7 | import ArrowIcon from './ArrowIcon'
8 | import ChevronIcon from './ChevronIcon'
9 | import RewindIcon from './RewindIcon'
10 | import RepeatIcon from './RepeatIcon'
11 | import TafsirIcon from './TafsirIcon'
12 | import DotsIcon from './DotsIcon'
13 | import DownloadIcon from './DownloadIcon'
14 | import XIcon from './XIcon'
15 | import ListsIcon from './ListsIcon'
16 | import PlayIcon from './PlayIcon'
17 | import PauseIcon from './PauseIcon'
18 |
19 |
20 | export {
21 | HistoryIcon,
22 | CopyIcon,
23 | InfoIcon,
24 | StarIcon,
25 | BookmarkIcon,
26 | AdjustmentIcon,
27 | ArrowIcon,
28 | ChevronIcon,
29 | RewindIcon,
30 | RepeatIcon,
31 | TafsirIcon,
32 | DotsIcon,
33 | DownloadIcon,
34 | XIcon,
35 | ListsIcon,
36 | PauseIcon,
37 | PlayIcon
38 | }
--------------------------------------------------------------------------------
/src/utils/fonts/index.ts:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames/bind';
2 | import localFont from 'next/font/local';
3 |
4 | const alQalamFont = localFont({
5 | src: './al_qalam/alqalam.ttf',
6 | });
7 |
8 | const meQuranFont = localFont({
9 | src: './me_quran/me_quran-2.woff2',
10 | });
11 |
12 | const nastaleeqFont = localFont({
13 | src: './nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff',
14 | });
15 |
16 | const uthmanicFont = localFont({
17 | src: './uthmanic_hafs/UthmanicHafs1Ver18.woff2',
18 | });
19 |
20 | export const alQalamClassName = alQalamFont.className;
21 | export const meQuranClassName = meQuranFont.className;
22 | export const nastaleeqClassName = nastaleeqFont.className;
23 | export const uthmanicClassName = uthmanicFont.className;
24 |
25 | const ArabicFontsClassNames = {
26 | alQalam: alQalamFont.className,
27 | meQuran: meQuranFont.className,
28 | nastaleeq: nastaleeqFont.className,
29 | uthmanic: uthmanicFont.className,
30 | };
31 |
32 | const arabicFontStyle = classNames.bind(ArabicFontsClassNames);
33 |
34 | export default arabicFontStyle;
35 |
--------------------------------------------------------------------------------
/src/components/TopBar/DeveloperUtility/OptionList.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 |
4 | type OptionListProps = {
5 | onClick: () => void;
6 | children: React.ReactNode;
7 | label?: string;
8 | active?: boolean;
9 | };
10 |
11 | const OptionList = ({ onClick, children }: OptionListProps) => {
12 | return (
13 |
28 |
31 | -
19 | {new Array(chapterLists[chapterId].verses_count)
20 | .fill(0)
21 | .map((key, index) => (
22 |
- 24 | router.push(`/surah/${chapterId + 1}?ayah=${index + 1}`) 25 | } 26 | key={index} 27 | className="p-1 cursor-pointer hover:bg-emerald-100 dark:hover:bg-emerald-400 dark:hover:text-slate-100 hover:text-emerald-500 rounded flex items-center" 28 | > 29 | {index + 1} 30 | 31 | ))} 32 |
20 |
30 | );
31 | };
32 |
33 | export default BannerWrapper;
34 |
--------------------------------------------------------------------------------
/src/app/(main)/juz/page.tsx:
--------------------------------------------------------------------------------
1 | import JuzsView from "@components/chapters/JuzsView";
2 | import { getAllChaptersData } from "@utils/chapter";
3 | import { getJuzs } from "@utils/juz";
4 | import { canonicalUrl, staticDescription } from "@utils/seo";
5 | import { Metadata } from "next";
6 | import React from "react";
7 |
8 | const IS_PRODUCTION = process.env.NODE_ENV === "production";
9 |
10 | export const metadata: Metadata = {
11 | title: "Baca Quran - Juz",
12 | description: staticDescription["/juz"],
13 | robots: IS_PRODUCTION ? "index, follow" : "noindex, nofollow",
14 | openGraph: {
15 | title: "Baca Quran - Juz",
16 | description: staticDescription["/juz"],
17 | url: `${canonicalUrl}quran/juz}`,
18 | },
19 | twitter: {
20 | title: "Baca Quran - Juz",
21 | description: staticDescription["/juz"],
22 | },
23 | };
24 |
25 | const JuzList = async () => {
26 | const juzsData = await getJuzs();
27 | const chapterData = await getAllChaptersData();
28 |
29 | return (
30 | {children}
21 | {/*
22 |
*/}
29 |
31 |
33 | );
34 | };
35 |
36 | export default JuzList;
37 |
--------------------------------------------------------------------------------
/src/utils/types/Verse.ts:
--------------------------------------------------------------------------------
1 | export type VerseWord = {
2 | id: string;
3 | text: string;
4 | location: string;
5 | position: number;
6 | translation: {
7 | text: string;
8 | };
9 | transliteration: {
10 | text: string;
11 | };
12 | };
13 |
14 | export type Verse = {
15 | id: number;
16 | verse_number: number;
17 | text_uthmani: string;
18 | verse_key: string;
19 | translations: {
20 | id: string;
21 | resource_id: number;
22 | text: string;
23 | };
24 | words: VerseWord[];
25 | };
26 |
27 | export type VersePagination = {
28 | per_page: number;
29 | current_page: number;
30 | total_pages: number;
31 | total_count: number;
32 | };
33 |
34 | export enum GetVerseBy {
35 | Chapter = 'by_chapter',
36 | Juz = 'by_juz',
37 | }
38 |
39 | export type GetVerseParams = {
40 | lang?: string;
41 | words?: boolean;
42 | per_page?: number;
43 | id: number;
44 | page?: number;
45 | getBy: GetVerseBy;
46 | };
47 |
48 | export type GetVerseByJuzParams = {
49 | lang?: string;
50 | words?: boolean;
51 | per_page?: number;
52 | id: number;
53 | page?: number;
54 | };
55 |
56 | export type VersesResponse = {
57 | verses: Verse[];
58 | pagination: VersePagination;
59 | };
60 |
--------------------------------------------------------------------------------
/src/components/quranReader/QuranReader.tsx:
--------------------------------------------------------------------------------
1 | import Bismillah from "./Bismillah";
2 | import { GetVerseBy, Verse } from "@utils/types/Verse";
3 | import InitialSurahVerse from "./InitialSurahVerse";
4 | import dynamic from "next/dynamic";
5 |
6 | const FetchInfiniteVerse = dynamic(() => import("./FetchInfiniteVerse"), {
7 | ssr: false,
8 | });
9 |
10 | type QuranReaderProps = {
11 | versesData: Verse[];
12 | bismillahPre?: boolean;
13 | versesCount: number;
14 | id: number;
15 | type: "chapter" | "juz";
16 | };
17 |
18 | const QuranReader = ({
19 | versesData,
20 | bismillahPre,
21 | versesCount,
22 | id,
23 | type,
24 | }: QuranReaderProps) => {
25 | return (
26 |
27 | <>
28 |
41 | );
42 | };
43 |
44 | export default QuranReader;
45 |
--------------------------------------------------------------------------------
/src/components/Bookmark/BookmarkedVerseLists.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import BookmarkedItem from './BookmarkedItem';
4 | import useSurah from '../../store/surahStore';
5 | import { getLocalChapter } from '../../utils/chapter';
6 | import { useEffect } from 'react';
7 | import { shallow } from 'zustand/shallow';
8 | import BookmarkWrapper from './BookmarkWrapper';
9 |
10 | const BookmarkedVerseLists = () => {
11 | const { bookmarkData, chapterData, setBookmarked } = useSurah(
12 | (state) => ({
13 | bookmarkData: state.bookmarked,
14 | chapterData: state.chapterData,
15 | setBookmarked: state.setBookmarkData,
16 | }),
17 | shallow
18 | );
19 |
20 | if (chapterData.length === 0) return <>;
21 |
22 | return (
23 |
30 |
39 |
40 |
30 |
40 | );
41 | };
42 |
43 | export default SingleAyahPage;
44 |
--------------------------------------------------------------------------------
/src/components/TopBar/DeveloperUtility/TranslationOption.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AdjustmentWrapper from './AdjustmentWrapper';
3 | import { OptionButton } from './OptionList';
4 | import useSettings from '@stores/settingsStore';
5 |
6 | type Props = {};
7 |
8 | const TranslationOption = (props: Props) => {
9 | const { translationMode, setTranslationMode } = useSettings((state) => ({
10 | translationMode: state.translationMode,
11 | setTranslationMode: state.setTranslationMode,
12 | }));
13 |
14 | return (
15 |
17 |
34 |
18 | setTranslationMode('word')}
20 | label="scroll otomatis per kata"
21 | active={translationMode === 'word'}
22 | >
23 | Kata
24 |
25 | setTranslationMode('verse')}
27 | label="scroll otomatis per ayah"
28 | active={translationMode === 'verse'}
29 | >
30 | Ayah
31 |
32 |
33 | -
20 | {chapterLists?.map((e) => (
21 |
- router.push(`/surah/${e.id}`)} 24 | className={classNames( 25 | "px-2 py-1 cursor-pointer hover:bg-emerald-100/50 dark:hover:bg-emerald-400/30 dark:hover:text-slate-100 hover:text-emerald-500 rounded flex items-center", 26 | { "dark:bg-emerald-400 bg-emerald-200": chapterActive == e.id } 27 | )} 28 | > 29 | 30 | {e.id} 31 | 32 | {e.name_simple} 33 | 34 | ))} 35 |
26 |
40 | 41 | 42 | Tampilkan lebih lengkap 43 | 44 | 45 |
46 | );
47 | };
48 |
49 | export default SurahInfo;
50 |
--------------------------------------------------------------------------------
/src/components/Skeleton/skeleton.module.css:
--------------------------------------------------------------------------------
1 | .skeleton{
2 | border-radius: 5px;
3 | }
4 |
5 | .skeleton{
6 | position: relative;
7 | overflow: hidden;
8 | }
9 |
10 | .skeleton::after{
11 | content: '';
12 | display: block;
13 | position: absolute;
14 | width: 0%;
15 | height: 100%;
16 | /* background-color: red; */
17 | background-color: rgba(255, 255, 255, 0.411);
18 | /* filter: blur(10px); */
19 | animation: wave;
20 | animation-duration: 1.2s;
21 | animation-timing-function: ease-in-out;
22 | animation-iteration-count: infinite;
23 |
24 | }
25 |
26 | .skeleton.delay::after{
27 | animation-delay: 200ms;
28 | }
29 |
30 | @keyframes wave{
31 | /* 0% {
32 | left: -10%;
33 | opacity: 1;
34 | }
35 | 70% {
36 | left: 100%;
37 | opacity: 1;
38 | }
39 | 71% {
40 | left: 100%;
41 | opacity: 0;
42 | }
43 | 72% {
44 | opacity: 1;
45 | left: -10%;
46 | }
47 |
48 | 100% {
49 | left: 100%;
50 | } */
51 | 0% {
52 | width: 0%;
53 | }
54 | 50% {
55 | width: 100%;
56 | }
57 | 51% {
58 | transform: translateX(0%);
59 | width: 100%;
60 | }
61 | 70% {
62 | transform: translateX(0%);
63 | width: 100%;
64 | }
65 | 100% {
66 | transform: translateX(100%);
67 | width: 100%;
68 | }
69 |
70 | }
--------------------------------------------------------------------------------
/src/components/quranReader/action/HandleBookmark.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import React from 'react';
4 | import IconWrapper from '../../icons/IconWrapper';
5 | import BookmarkIcon from '../../icons/BookmarkIcon';
6 | import useSurah from '../../../store/surahStore';
7 | import { toast } from 'react-hot-toast';
8 |
9 | type HandleBookmarkProps = {
10 | verseKey: string;
11 | };
12 |
13 | const HandleBookmark = ({ verseKey }: HandleBookmarkProps) => {
14 | const { bookmarked, addBookmark, deleteBookmarked } = useSurah((state) => ({
15 | bookmarked: state.bookmarked,
16 | addBookmark: state.addBookmarkData,
17 | deleteBookmarked: state.deleteBookmarkData,
18 | }));
19 |
20 | const isBookmarked = bookmarked.includes(verseKey);
21 |
22 | function handleBookmarkClick(verseKey) {
23 | if (isBookmarked) {
24 | deleteBookmarked(verseKey);
25 | } else {
26 | addBookmark(verseKey);
27 | toast.success('Ayat berhasil ditandai');
28 | }
29 | }
30 |
31 | return (
32 |
27 |
28 | Jumlah Ayah :
29 | {verses_count}
30 |
31 |
32 | 33 | Tempat Wahyu : 34 | {revelation_place} 35 | 36 |
37 |
38 | 32 | 33 | Tempat Wahyu : 34 | {revelation_place} 35 | 36 |
37 |
{short_text}
39 |40 | 41 | 42 | Tampilkan lebih lengkap 43 | 44 | 45 |
17 |
41 |
18 | setAutoScroll(false)}
20 | label="Matikan scroll otomatis"
21 | active={autoScroll === false}
22 | >
23 | Mati
24 |
25 | setAutoScroll('word')}
27 | label="scroll otomatis per kata"
28 | active={autoScroll === 'word'}
29 | >
30 | Kata
31 |
32 | setAutoScroll('verse')}
34 | label="scroll otomatis per ayah"
35 | active={autoScroll === 'verse'}
36 | >
37 | Ayah
38 |
39 |
40 |
15 |
42 | );
43 | };
44 |
45 | export default BookmarkWrapper;
46 |
--------------------------------------------------------------------------------
/src/components/quranReader/VerseSkeleton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Skeleton from "../Skeleton/Skeleton";
3 | import classNames from "classnames";
4 |
5 | type VerseSkeletonProps = {
6 | className?: string;
7 | animateDelay?: number | string;
8 | };
9 |
10 | const VerseSkeleton = ({ className, animateDelay }: VerseSkeletonProps) => {
11 | return (
12 |
16 |
41 |
17 |
26 |
28 |
29 |
18 |
21 |
30 | {isEmpty ? (
31 |
40 |
32 | Klik
33 |
36 | ) : (
37 | children
38 | )}
39 |
13 |
41 |
42 | );
43 | };
44 |
45 | export default VerseSkeleton;
46 |
--------------------------------------------------------------------------------
/src/components/TopBar/DeveloperUtility/ThemeAdjustment.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import AdjustmentWrapper from './AdjustmentWrapper';
4 | import useSettings from '../../../store/settingsStore';
5 |
6 | const ThemeAdjustment = () => {
7 | const { setTheme, theme } = useSettings((state) => ({
8 | theme: state.theme,
9 | setTheme: state.setTheme,
10 | }));
11 |
12 | return (
13 |
23 |
40 |
24 |
35 |
25 |
27 |
28 |
34 |
29 |
33 |
36 |
39 | 41 |
15 |
43 |
16 |
23 |
42 | setTheme('light')}
29 | >
30 | Terang
31 |
32 | setTheme('dark')}
38 | >
39 | Gelap
40 |
41 |
40 |
47 | );
48 | };
49 |
50 | export default TopBar;
51 |
--------------------------------------------------------------------------------
/src/components/chapters/Card/ChapterCard.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 | import { StarIcon } from "../../icons";
4 | import ChapterWrapper from "./ChapterWrapper";
5 | import classNames from "classnames";
6 | import { nastaleeqClassName } from "@utils/fonts";
7 |
8 | type ChapterCardProps = {
9 | chapterId: number;
10 | translated_name: string;
11 | name_arabic: string;
12 | name_simple: string;
13 | verse_mapping?: string;
14 | };
15 |
16 | const ChapterCard = ({
17 | chapterId,
18 | translated_name,
19 | name_arabic,
20 | name_simple,
21 | verse_mapping,
22 | }: ChapterCardProps) => {
23 | return (
24 |
25 |
27 |
38 |
28 | {chapterId}
29 |
31 |
32 | {name_simple}
33 |
34 | {translated_name}
35 |
36 |
37 |
39 |
45 | {name_arabic}
46 |
47 | {verse_mapping && {verse_mapping}}
48 |
49 | setExpanded(!isExpanded)}
32 | className="text-center py-2 px-2 group text-black dark:text-slate-100 bg-gray-100 dark:bg-slate-500 rounded w-32 flex justify-between relative cursor-pointer"
33 | >
34 | {lang[langId]}
35 |
53 | -
49 |
50 | //
61 | //
51 | // {data.map((item) => (
52 | //
60 | //
26 | setExpanded(!isExpanded)}
29 | onHover='none'
30 | className='bg-emerald-400'
31 | >
32 |
34 |
60 | );
61 | };
62 |
63 | export default DeveloperUtility;
64 |
--------------------------------------------------------------------------------
/src/components/Hadith/HadithVerse.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { StarIcon } from '@components/icons';
4 | import ArabicText from '@components/quranReader/ArabicText';
5 | import CopyToClipboard from '@components/quranReader/action/CopyToClipboard';
6 | import HandleBookmark from '@components/quranReader/action/HandleBookmark';
7 | import React, { ForwardedRef, forwardRef, useEffect } from 'react';
8 |
9 | type Props = {
10 | number: number;
11 | arab: string;
12 | translation: string;
13 | style?: any;
14 | measure?: any;
15 | };
16 |
17 | const HadithVerse = forwardRef(function Verse(
18 | { number, arab, translation, style, measure }: Props,
19 | ref: ForwardedRef
47 |
59 | Loading
;
28 | return (
29 |
30 |
58 |
59 | );
60 | });
61 |
62 | export default HadithVerse;
63 |
--------------------------------------------------------------------------------
/src/components/Hadith/HadithReader/DynamicHadithData.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { HadithContent, HaditsDetail } from '@utils/types/Hadith';
4 | import React, { useEffect, useState } from 'react';
5 | import HadithVerse from '../HadithVerse';
6 | import { getHadithDetail } from '@utils/api/hadith';
7 | import { ListRange, Virtuoso } from 'react-virtuoso';
8 | import VerseSkeleton from '@components/quranReader/VerseSkeleton';
9 |
10 | type Props = {
11 | totalData: number;
12 | id: string;
13 | };
14 |
15 | const START_RANGE = 31;
16 | const LIMIT = 30;
17 |
18 | const DynamicHadithsData = ({ totalData, id }: Props) => {
19 | const [data, setData] = useState
31 |
57 |
32 |
45 |
33 |
34 | {number}
35 |
36 |
38 |
39 |
44 |
40 |
43 |
46 |
56 | 58 |
51 |
84 | );
85 | };
86 |
87 | export default Word;
88 |
--------------------------------------------------------------------------------
/src/app/(main)/juz/[juzId]/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { notFound } from 'next/navigation';
4 | import { Metadata } from 'next';
5 | import { getVerses } from '@utils/verse';
6 | import Wrapper from '@components/Wrapper';
7 | import QuranReader from '@components/quranReader/QuranReader';
8 | import { canonicalUrl, defaultOpenGraph, defaultTwitter } from '@utils/seo';
9 | import { getJuzData, getJuzs } from '@utils/juz';
10 | import { GetVerseBy } from '@utils/types/Verse';
11 |
12 | const IS_PRODUCTION = process.env.NODE_ENV === 'production';
13 |
14 | export async function generateStaticParams() {
15 | const res = await getJuzs();
16 | const paths = res.juzs.map((item) => ({
17 | juzId: item.id.toString(),
18 | }));
19 |
20 | return paths;
21 | }
22 |
23 | export async function generateMetadata({ params }): Promise
70 | {children}
71 | {shouldShowTransliteration && (
72 |
73 | {transliteration}
74 |
75 | )}
76 |
77 | {/* dont show Ayah number */}
78 | {translationMode === 'word' && !isAyahNumber && (
79 |
80 | {transalation}
81 |
82 | )}
83 |
38 |
73 |
74 | );
75 | };
76 |
77 | export default Verses;
78 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/[chapterId]/info/page.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { notFound } from "next/navigation";
4 | import { Metadata } from "next";
5 | import { getAllChaptersData, getChapter, getChapterInfo } from "@utils/chapter";
6 | import { ArrowIcon } from "@components/icons";
7 |
8 | export async function generateStaticParams() {
9 | const res = await getAllChaptersData();
10 | const paths = res.chapters.map((item) => ({
11 | chapterId: item.id.toString(),
12 | }));
13 |
14 | return paths;
15 | }
16 |
17 | export async function generateMetadata({ params }): Promise
42 |
72 |
43 |
57 |
44 |
45 | {verse_number}
46 |
47 |
49 |
50 |
56 |
51 |
55 |
58 |
71 | 73 |
47 |
71 | );
72 | };
73 |
74 | export default SurahInfoPage;
75 |
--------------------------------------------------------------------------------
/src/components/AudioPlayer/PlaybackController/PlaybackController.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React, { useContext } from 'react';
3 | import PlaybackOption from './PlaybackOption';
4 | import { RewindIcon, PlayIcon, PauseIcon, RepeatIcon } from '../../icons';
5 | import useQuranReader from '@stores/quranReaderStore';
6 |
7 | type ButtonSmallProps = {
8 | className?: string;
9 | onClick?: () => void;
10 | children?: React.ReactNode;
11 | };
12 |
13 | export const ButtonSmall = ({
14 | className,
15 | onClick,
16 | children,
17 | }: ButtonSmallProps) => (
18 |
27 | );
28 |
29 | const PlaybackController = ({ state, dispatch, reset }) => {
30 | const { audioId, setAudioId } = useQuranReader((state) => ({
31 | audioId: state.audioId,
32 | setAudioId: state.setAudioId,
33 | }));
34 |
35 | function goToPrevSurah() {
36 | if (audioId > 1) {
37 | setAudioId(audioId - 1);
38 | } else {
39 | setAudioId(114);
40 | }
41 | }
42 |
43 | function goToNextSurah() {
44 | if (audioId < 114) {
45 | setAudioId(audioId + 1);
46 | } else {
47 | setAudioId(1);
48 | }
49 | }
50 |
51 | return (
52 | <>
53 |
48 |
52 |
65 | 69 |
70 |
56 |
59 | 60 | Diturunkan di{" "} 61 | {chapterData.revelation_place} 62 | 63 |
64 | {chapterData.name_complex}
57 | {chapterData.verses_count} Ayah 58 |59 | 60 | Diturunkan di{" "} 61 | {chapterData.revelation_place} 62 | 63 |
65 | 69 |
54 |
86 |
87 | );
88 | };
89 |
90 | export default PlaybackController;
91 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
55 | dispatch({ type: 'repeat' })}
57 | className=""
58 | >
59 |
65 |
66 |
68 | {state.isPlaying ? (
69 | dispatch({ type: 'pause' })}>
70 |
72 | ) : (
73 |
74 | dispatch({ type: 'play' })}
76 | className="h-6"
77 | />
78 |
79 | )}
80 |
81 |
83 |
85 | 3 |
4 |
5 | 
6 |
7 |
8 |
9 | Visit QuranApp 10 |
11 | 12 | 13 | 14 |About QuranApp
15 | WEB-based reading application, the purpose of this application is so that Muslim people can read and listen to Murottal anywhere and anytime without having to download the application as long as the device remains connected to the internet. 16 | 17 |18 | 19 |
Features
20 | - Dark Theme 21 |22 | - Auto Highlight Verse When Playing Audio 23 |
24 | - Mark Verse 25 |
26 | - PWA (Progressive Web Apps) 27 | 28 |
29 | 30 |
Credits
31 | - API Data Source Quran.com 32 | 33 |34 | 35 | 36 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) and using [`tailwind`](https://tailwindcss.com/) for styling 37 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | ## Getting Started 45 | 46 | First, run the development server: 47 | 48 | ```bash 49 | npm run dev 50 | # or 51 | yarn dev 52 | ``` 53 | 54 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 55 | 56 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 57 | 58 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 59 | 60 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 61 | 62 | ## Learn More 63 | 64 | To learn more about Next.js, take a look at the following resources: 65 | 66 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 67 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 68 | 69 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 70 | 71 | ## Deploy on Vercel 72 | 73 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 74 | 75 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 76 | -------------------------------------------------------------------------------- /src/components/Banner/ChapterBanner.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import React, { useEffect } from 'react'; 4 | import { useState } from 'react'; 5 | import IconWrapper from '../icons/IconWrapper'; 6 | import BannerWrapper from './BannerWrapper'; 7 | import SurahInfo from './SurahInfo'; 8 | import { InfoIcon } from '../icons'; 9 | import { shallow } from 'zustand/shallow'; 10 | import useQuranReader from '@stores/quranReaderStore'; 11 | import { Chapter, ChapterInfo } from '@utils/types/Chapter'; 12 | 13 | type ChapterBannerProps = { 14 | chapterData: Chapter; 15 | chapterInfo: ChapterInfo; 16 | }; 17 | 18 | const ChapterBanner = ({ chapterData, chapterInfo }: ChapterBannerProps) => { 19 | const { setCurrentChapter } = useQuranReader( 20 | (state) => ({ 21 | setCurrentChapter: state.setCurrentChapter, 22 | }), 23 | shallow 24 | ); 25 | const [isInfoOpen, setInfoOpen] = useState(false); 26 | 27 | useEffect(() => { 28 | setCurrentChapter(chapterData.id); 29 | // eslint-disable-next-line react-hooks/exhaustive-deps 30 | }, []); 31 | 32 | return ( 33 |
39 | setInfoOpen(!isInfoOpen)}
43 | onHover="none"
44 | >
45 |
47 |
58 |
78 | 48 | {chapterData.name_simple} 49 |
50 | 51 | {chapterData.translated_name.name} 52 | 53 |58 |
65 | setExpanded(true)}
67 | onBlur={handleBlur}
68 | onChange={(e) => handleChange(e)}
69 | type="text"
70 | className={
71 | "bg-gray-100 w-full dark:bg-slate-600 dark:text-slate-200 dark:ring-emerald-500 py-2 px-3 my-3 rounded-lg outline-none focus:ring-2 ring-emerald-300 transition-all " +
72 | className
73 | }
74 | placeholder="Cari Surah"
75 | />
76 | {isExpanded && (
77 |
91 | );
92 | };
93 |
94 | export default Search;
95 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/[chapterId]/page.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { notFound } from "next/navigation";
4 | import { Metadata } from "next";
5 | import { getVerses } from "@utils/verse";
6 | import { getAllChaptersData, getChapter, getChapterInfo } from "@utils/chapter";
7 | import Wrapper from "@components/Wrapper";
8 | import ChapterBanner from "@components/Banner/ChapterBanner";
9 | import QuranReader from "@components/quranReader/QuranReader";
10 | import PlayAudioButton from "@components/AudioPlayer/PlayAudioButton";
11 | import { canonicalUrl, defaultOpenGraph, defaultTwitter } from "@utils/seo";
12 | import { GetVerseBy } from "@utils/types/Verse";
13 |
14 | const IS_PRODUCTION = process.env.NODE_ENV === "production";
15 |
16 | export async function generateStaticParams() {
17 | const res = await getAllChaptersData();
18 | const paths = res.chapters.map((item) => ({
19 | chapterId: item.id.toString(),
20 | }));
21 |
22 | return paths;
23 | }
24 |
25 | export async function generateMetadata({ params }): Promise
78 | {filteredChapters.length > 0 &&
79 | filteredChapters.map((e) => (
80 |
85 | {e.name_simple}
86 |
87 | ))}
88 |
89 | )}
90 | 30 | // Assalamu'alakum 31 | //
32 | //
33 | //
37 | //
72 | //
76 | // Credits
77 | //
78 | // setExpanded(!isExpanded)}
22 | className="text-center py-2 px-2 group text-black dark:text-slate-100 bg-gray-100 dark:bg-slate-500 rounded w-36 flex justify-between relative cursor-pointer"
23 | >
24 |
25 | {fontFace ? fontFaces[fontFace] : 'Al - Qalam'}
26 |
27 |
48 | -
41 | {fontFaces.map((key, index) => (
42 |
64 |
70 |
78 | {currentFontSize}
71 |
77 |
37 |
97 | );
98 | };
99 |
100 | export default DropdownHadithLists;
101 |
--------------------------------------------------------------------------------
/src/components/quranReader/ArabicText.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import classNames from 'classnames';
4 | import React from 'react';
5 | import useSettings from '../../store/settingsStore';
6 | import useSurah from '../../store/surahStore';
7 | import { shallow } from 'zustand/shallow';
8 | import arabicFontStyle from '../../utils/fonts';
9 | import Word from './Arabic/Word';
10 | import { VerseWord } from '@utils/types/Verse';
11 | import useQuranReader from '@stores/quranReaderStore';
12 |
13 | type ArabicTextProps = {
14 | textUthmani: string;
15 | verseNumber: number;
16 | verseKey?: string;
17 | words?: VerseWord[];
18 | leading?: 'normal' | 'medium' | 'tight';
19 | };
20 |
21 | const ArabicText = ({
22 | textUthmani,
23 | verseNumber,
24 | verseKey,
25 | words,
26 | leading = 'medium',
27 | }: ArabicTextProps) => {
28 | const { fontFace, currentFontSize, autoScroll } = useSettings(
29 | (state) => ({
30 | fontFace: state.fontFace,
31 | currentFontSize: state.fontSize,
32 | autoScroll: state.autoScroll,
33 | }),
34 | shallow
35 | );
36 |
37 | const { highlightedVerse } = useQuranReader(
38 | (state) => ({
39 | highlightedVerse: state.highlightedVerse,
40 | }),
41 | shallow
42 | );
43 |
44 | const arabicNumber = (value) => {
45 | const arabicNumbers =
46 | '\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669';
47 | return String(value).replace(/[0123456789]/g, (d) => {
48 | return arabicNumbers[d];
49 | });
50 | };
51 |
52 | return (
53 |
38 |
43 |
66 | {/* Dropdown Menu */}
67 | setOpen(!open)}
48 | className={classNames(
49 | 'p-2 cursor-pointer border border-transparent bg-white dark:bg-slate-600 w-fit rounded-md flex items-center relative',
50 | {
51 | 'border-emerald-500 shadow-lg shadow-emerald-500/10': open,
52 | }
53 | )}
54 | >
55 |
58 |
65 |
74 |
96 | -
79 | {hadithData.map((e) => (
80 |
- router.push(`hadits/${e.id}`)} 83 | className={classNames( 84 | 'px-2 py-1 cursor-pointer hover:bg-emerald-100/50 dark:hover:bg-emerald-400/30 dark:hover:text-slate-100 hover:text-emerald-500 rounded flex items-center', 85 | { 86 | 'dark:bg-emerald-400 bg-emerald-200': 87 | hadithData[index].id == e.id, 88 | } 89 | )} 90 | > 91 | {e.name} 92 | 93 | ))} 94 |
70 |
116 | );
117 | };
118 |
119 | export default ArabicText;
120 |
--------------------------------------------------------------------------------
/src/components/TopBar/DropdownSurahLists/DropdownSurahLists.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import classNames from "classnames";
4 | import React, { useState, useCallback } from "react";
5 | import ChapterLists from "./ChapterLists";
6 | import { ChevronIcon, ArrowIcon } from "../../icons";
7 | import { LocalChapter } from "data/chapter/type";
8 | import VerseList from "./VerseList";
9 | import { useRouter } from "next/navigation";
10 |
11 | type DropdownSurahListsProps = {
12 | chapterLists: LocalChapter[];
13 | chapterActive: number;
14 | };
15 |
16 | const DropdownSurahLists = ({
17 | chapterLists,
18 | chapterActive,
19 | }: DropdownSurahListsProps) => {
20 | const [open, setOpen] = useState(false);
21 | const [filteredChapterLists, setFilteredChapterLists] = useState(null);
22 | const router = useRouter();
23 |
24 | const handleChange = useCallback((e) => {
25 | const keyword = e.target.value;
26 |
27 | const result = chapterLists.filter((chapters) => {
28 | return chapters.name_simple.toLowerCase().includes(keyword.toLowerCase());
29 | });
30 | setFilteredChapterLists(() => {
31 | if (result.length > 0) {
32 | return result;
33 | } else {
34 | return [{ name_simple: "Tidak ditemukan" }];
35 | }
36 | });
37 | // eslint-disable-next-line react-hooks/exhaustive-deps
38 | }, []);
39 |
40 | if (chapterLists) {
41 | return (
42 |
79 | {words
80 | ? words.map((word) => (
81 |
93 | {word.text}
94 |
95 | ))
96 | : textUthmani}
97 |
98 | {!(fontFace === 3) && (
99 |
112 | {arabicNumber(verseNumber)}
113 |
114 | )}
115 |
43 |
100 | );
101 | }
102 | };
103 |
104 | export default DropdownSurahLists;
105 |
--------------------------------------------------------------------------------
/src/utils/seo.ts:
--------------------------------------------------------------------------------
1 | import { getBasePath } from "./url";
2 | import { Metadata } from "next";
3 |
4 | export const websiteDescription =
5 | "Baca Quran adalah aplikasi web interaktif yang memungkinkan pengguna untuk membaca, mencari, dan menjelajahi teks suci Al-Quran secara digital. Aplikasi ini dilengkapi dengan berbagai fitur yang memudahkan pengguna dalam mempelajari dan meresapi ayat-ayat Al-Quran, seperti terjemahan, tafsir, dan audio.";
6 |
7 | export const config = {
8 | siteName: "Quran App",
9 | websiteLogo: `${getBasePath()}/quranapp.jpg`,
10 | twitterHandle: "@quran_app",
11 | twitterCardType: "summary_large_image",
12 | facebookApp: "5277775832307938",
13 | };
14 |
15 | export const staticDescription = {
16 | "/": "Pustaka Islam adalah aplikasi untuk membaca Quran, Hadits, dan Doa",
17 | "/surah":
18 | "Baca Quran secara online yang memungkinkan pengguna untuk membaca, mencari, dan menjelajahi teks suci Al-Quran secara digital. Aplikasi ini dilengkapi dengan berbagai fitur yang memudahkan pengguna dalam mempelajari dan meresapi ayat-ayat Al-Quran, seperti terjemahan, tafsir, dan audio dengan berbagai pilihan qori.",
19 | "/juz": "Baca Quran berdasarkan juz",
20 | "/hadits":
21 | "Baca Hadits secara online dengan berbagai pilihan kitab hadits dan di lengkapi dengan terjemahan",
22 | };
23 |
24 | export const staticTitle = {
25 | "/surah": "Baca Quran - Surah",
26 | "/juz": "Baca Quran - Juz",
27 | };
28 |
29 | export const canonicalUrl = new URL(getBasePath());
30 |
31 | export const defaultOpenGraph: Metadata["openGraph"] = {
32 | title: staticTitle["/"],
33 | type: "website",
34 | locale: "id",
35 | description: staticDescription["/"],
36 | siteName: "Quran App",
37 | url: canonicalUrl,
38 | };
39 |
40 | export const defaultTwitter: Metadata["twitter"] = {
41 | title: staticTitle["/"],
42 | creator: "@acmaul",
43 | card: "summary_large_image",
44 | description: staticDescription["/"],
45 | };
46 |
47 | // export function createSEOConfig({ title, description, canonicalUrl, locale }) {
48 | // const seoTitle = title || '';
49 |
50 | // return {
51 | // title: seoTitle,
52 | // description,
53 | // titleTemplate: '%s - Quran.com',
54 | // defaultTitle: config.siteName,
55 | // dangerouslySetAllPagesToNoFollow: !isProduction, // @see https://github.com/garmeeh/next-seo#dangerouslySetAllPagesToNoFollow
56 | // dangerouslySetAllPagesToNoIndex: !isProduction, // @see https://github.com/garmeeh/next-seo#dangerouslySetAllPagesToNoIndex
57 | // canonical: canonicalUrl,
58 | // openGraph: {
59 | // type: 'website',
60 | // locale: 'id',
61 | // url: canonicalUrl,
62 | // title: seoTitle,
63 | // description,
64 | // images: [
65 | // {
66 | // url: config.websiteLogo,
67 | // width: 2026,
68 | // height: 875,
69 | // alt: config.siteName,
70 | // },
71 | // ],
72 | // site_name: config.siteName,
73 | // },
74 | // facebook: {
75 | // appId: config.facebookApp,
76 | // },
77 | // twitter: {
78 | // handle: config.twitterHandle,
79 | // site: config.twitterHandle,
80 | // cardType: config.twitterCardType,
81 | // },
82 | // additionalMetaTags: [
83 | // {
84 | // name: 'Charset',
85 | // content: 'UTF-8',
86 | // },
87 | // {
88 | // name: 'Distribution',
89 | // content: 'Global', // indicates that your webpage is intended for everyone
90 | // },
91 | // {
92 | // name: 'Rating',
93 | // content: 'General', // lets the younger web-surfers know the content is appropriate
94 | // },
95 | // {
96 | // name: 'theme-color',
97 | // content: '#fff', // placeholder
98 | // },
99 | // {
100 | // name: 'viewport',
101 | // content: 'width=device-width, initial-scale=1, shrink-to-fit=no',
102 | // },
103 | // ],
104 | // };
105 | // }
106 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/[chapterId]/[ayahId]/opengraph-image.tsx:
--------------------------------------------------------------------------------
1 | import { getChapter } from "@utils/chapter";
2 | import { ImageResponse } from "next/og";
3 | import { Lato } from "next/font/google";
4 |
5 | export const runtime = "edge";
6 |
7 | const lato = Lato({
8 | subsets: ["latin"],
9 | weight: ["100", "300", "400", "700", "900"],
10 | });
11 |
12 | export const size = {
13 | width: 1200,
14 | height: 630,
15 | };
16 | export const contentType = "image/png";
17 |
18 | export default async function Image({
19 | params,
20 | }: {
21 | params: { chapterId: string; ayahId: string };
22 | }) {
23 | const chapterData = await getChapter(parseInt(params.chapterId));
24 | const NastaleeqFont = await fetch(
25 | new URL(
26 | "../../../../../utils/fonts/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.ttf",
27 | import.meta.url
28 | )
29 | ).then((res) => res.arrayBuffer());
30 |
31 | const LatoFont = await fetch(
32 | new URL("../../../../../utils/fonts/Lato-Regular.ttf", import.meta.url)
33 | ).then((res) => res.arrayBuffer());
34 |
35 | return new ImageResponse(
36 | (
37 |
44 |
51 | {/* Dropdown Toggle */}
52 |
72 | {/* Dropdown Menu */}
73 | setOpen(!open)}
54 | className={classNames(
55 | "p-2 cursor-pointer border border-transparent bg-white dark:bg-slate-600 w-fit rounded-md flex items-center relative",
56 | {
57 | "border-emerald-500 shadow-lg shadow-emerald-500/10": open,
58 | }
59 | )}
60 | >
61 |
64 |
71 |
80 |
99 |
81 | handleChange(value)}
83 | placeholder="Cari surah"
84 | className="w-full my-1 py-1 placeholder:text-sm bg-white dark:bg-slate-600 z-50 outline-none border border-emerald-500 rounded-md px-3"
85 | type="text"
86 | />
87 |
88 |
52 |
142 | ),
143 | {
144 | ...size,
145 | fonts: [
146 | {
147 | name: "Nastaleeq",
148 | data: NastaleeqFont,
149 | style: "normal",
150 | },
151 | {
152 | name: "Lato",
153 | data: LatoFont,
154 | style: "normal",
155 | },
156 | ],
157 | }
158 | );
159 | }
160 |
--------------------------------------------------------------------------------
/src/app/(main)/surah/[chapterId]/[ayahId]/twitter-image.tsx:
--------------------------------------------------------------------------------
1 | import { getChapter } from "@utils/chapter";
2 | import { ImageResponse } from "next/og";
3 | import { Lato } from "next/font/google";
4 |
5 | export const runtime = "edge";
6 |
7 | const lato = Lato({
8 | subsets: ["latin"],
9 | weight: ["100", "300", "400", "700", "900"],
10 | });
11 |
12 | export const size = {
13 | width: 1200,
14 | height: 630,
15 | };
16 | export const contentType = "image/png";
17 |
18 | export default async function Image({
19 | params,
20 | }: {
21 | params: { chapterId: string; ayahId: string };
22 | }) {
23 | const chapterData = await getChapter(parseInt(params.chapterId));
24 | const NastaleeqFont = await fetch(
25 | new URL(
26 | "../../../../../utils/fonts/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.ttf",
27 | import.meta.url
28 | )
29 | ).then((res) => res.arrayBuffer());
30 |
31 | const LatoFont = await fetch(
32 | new URL("../../../../../utils/fonts/Lato-Regular.ttf", import.meta.url)
33 | ).then((res) => res.arrayBuffer());
34 |
35 | return new ImageResponse(
36 | (
37 |
60 |
68 |
75 | https://quran.acml.me
76 |
77 |
78 |
96 |
141 |
103 |
109 | {chapterData.name_complex}
110 |
111 |
117 | ({chapterData.translated_name.name})
118 |
119 |
124 |
129 | Ayah {params.ayahId}
130 |
131 |
132 |
138 | {chapterData.name_arabic}
139 |
140 |
52 |
142 | ),
143 | {
144 | ...size,
145 | fonts: [
146 | {
147 | name: "Nastaleeq",
148 | data: NastaleeqFont,
149 | style: "normal",
150 | },
151 | {
152 | name: "Lato",
153 | data: LatoFont,
154 | style: "normal",
155 | },
156 | ],
157 | }
158 | );
159 | }
160 |
--------------------------------------------------------------------------------
/src/components/AudioPlayer/PlaybackController/PlaybackOption.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import Link from 'next/link';
3 | import React, { useContext, useEffect, useState } from 'react';
4 | import { ButtonSmall } from './PlaybackController';
5 | import {
6 | XIcon,
7 | ListsIcon,
8 | DownloadIcon,
9 | DotsIcon,
10 | ChevronIcon,
11 | } from '../../icons';
12 | import { getAllRecitations } from '../../../utils/audio';
13 | import { AudioContext } from '../AudioPlayer';
14 | import { shallow } from 'zustand/shallow';
15 | import useQuranReader from '@stores/quranReaderStore';
16 |
17 | const PlaybackOption = ({ onClickReset }) => {
18 | const { audioId, setAudioId } = useQuranReader(
19 | (state) => ({
20 | audioId: state.audioId,
21 | setAudioId: state.setAudioId,
22 | }),
23 | shallow
24 | );
25 | const { audioState, dispatch } = useContext(AudioContext);
26 |
27 | const [isHidden, setHidden] = useState(true);
28 | const [location, setLocation] = useState('main');
29 | const [recitations, setRecitations] = useState([]);
30 |
31 | useEffect(() => {
32 | getAllRecitations().then((res) => {
33 | setRecitations(res.recitations);
34 | });
35 | }, []);
36 |
37 | return (
38 |
60 |
68 |
75 | https://quran.acml.me
76 |
77 |
78 |
96 |
141 |
103 |
109 | {chapterData.name_complex}
110 |
111 |
117 | ({chapterData.translated_name.name})
118 |
119 |
124 |
129 | Ayah {params.ayahId}
130 |
131 |
132 |
138 | {chapterData.name_arabic}
139 |
140 |
39 | setHidden(!isHidden)} className="relative">
40 |
42 |
114 | );
115 | };
116 |
117 | export default PlaybackOption;
118 |
--------------------------------------------------------------------------------
/src/components/quranReader/FetchInfiniteVerse.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { GetVerseBy, Verse, VersePagination } from "@utils/types/Verse";
4 | import React, { useEffect, useRef, useState } from "react";
5 | import { ListItem, ListRange, Virtuoso, VirtuosoHandle } from "react-virtuoso";
6 | import VerseSkeleton from "./VerseSkeleton";
7 | import Verses from "./Verses";
8 | import { getVerses } from "@utils/verse";
9 | import useQuranReader from "@stores/quranReaderStore";
10 | import { shallow } from "zustand/shallow";
11 | import useSettings from "@stores/settingsStore";
12 | import { useSearchParams } from "next/navigation";
13 |
14 | type Props = {
15 | totalData: number;
16 | id: number;
17 | getVerseBy: GetVerseBy;
18 | };
19 |
20 | const LIMIT = 20;
21 | const FetchInfiniteVerse = ({ totalData, id, getVerseBy }: Props) => {
22 | const [data, setData] = useState
51 | {location === 'main' ? (
52 | <>
53 |
113 | setLocation('recitations')}
56 | >
57 |
63 |
68 |
59 | Pilih Qari
60 |
62 |
69 |
72 |
73 |
77 |
80 |
81 | ) : (
82 | <>
83 | setLocation('main')}
86 | >
87 |
90 | {recitations.map((e) => (
91 |
92 |
108 |
109 | ))}
110 |
111 | )}
112 |
98 | dispatch({ type: 'changeReciterId', payload: e.id })
99 | }
100 | >
101 | {e.reciter_name}
102 | {' '}
103 | {e.style && (
104 | ({e.style})
105 | )}
106 |
107 | 108 |
52 |
158 | ),
159 | {
160 | ...size,
161 | fonts: [
162 | {
163 | name: "Nastaleeq",
164 | data: NastaleeqFont,
165 | style: "normal",
166 | },
167 | {
168 | name: "Lato",
169 | data: LatoFont,
170 | style: "normal",
171 | },
172 | ],
173 | }
174 | );
175 | }
176 |
--------------------------------------------------------------------------------
60 |
68 |
75 | https://quran.acml.me
76 |
77 |
78 |
96 |
157 |
103 |
109 | {chapterData.name_complex}
110 |
111 |
118 | ({chapterData.translated_name.name})
119 |
120 |
125 |
130 | {chapterData.verses_count} Ayah
131 |
132 |
137 | Diturunkan di
138 |
144 | {chapterData.revelation_place}
145 |
146 |
147 |
148 |
154 | {chapterData.name_arabic}
155 |
156 |