diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 472ff32..0979d2a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -22,14 +22,14 @@ export default function RootLayout({ return (
-
+
{children}
- +
- +
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index dc5e0e1..a5e364f 100644 --- a/src/components/header/header.tsx +++ b/src/components/header/header.tsx @@ -3,7 +3,7 @@ import React from 'react'; const Header: React.FC = () => { return ( -
+
Al - Quran diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 1d7c958..eff7064 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -5,6 +5,7 @@ import { ISurah } from '@/constant/surah.constant'; import Link from 'next/link'; import React, { useEffect, useState } from 'react'; import { usePathname } from 'next/navigation'; +import { ScrollArea } from '../ui/scroll-area'; const Sidebar: React.FC = () => { const [surahs, setSurahs] = useState([]); @@ -28,58 +29,60 @@ const Sidebar: React.FC = () => { } return ( -
- {surahs.map((surah) => { - const isActive = pathname === `/${surah.nomor}`; + +
+ {surahs.map((surah) => { + const isActive = pathname === `/${surah.nomor}`; - return ( - -
-
-

+

+
- {surah.nomor} -

-
+

+ {surah.nomor} +

+
-
-

{surah.namaLatin}

+
+

{surah.namaLatin}

+

+ {surah.arti} +

+
+
+
+

{surah.nama}

- {surah.arti} + {surah.jumlahAyat} ayat

-
-
-

{surah.nama}

-

- {surah.jumlahAyat} ayat -

-
- - ); - })} -
+ + ); + })} +
+ ); }; diff --git a/src/modules/detailSurah/detailSurah.tsx b/src/modules/detailSurah/detailSurah.tsx index 6268543..4803453 100644 --- a/src/modules/detailSurah/detailSurah.tsx +++ b/src/modules/detailSurah/detailSurah.tsx @@ -30,7 +30,7 @@ const DetailSurahPage: React.FC = () => { } return ( -
+

{surah.namaLatin} - {surah.nama} diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx index 3249cdf..86c13de 100644 --- a/src/modules/home/home.tsx +++ b/src/modules/home/home.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'; import { getAllSurah } from '@/api/api'; import { ISurah } from '@/constant/surah.constant'; import Link from 'next/link'; +import { ScrollArea } from '@/components/ui/scroll-area'; const HomeModule: React.FC = () => { const [surahs, setSurahs] = useState([]); @@ -22,7 +23,7 @@ const HomeModule: React.FC = () => { }, []); return ( -
+

Baca Al-Quran Online

{surahs.map((surah, _index) => (