Feat/home

package.json

@@ -12,8 +12,10 @@
     "format:fix": "prettier --write --list-different ."
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/api/api.tsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { DetailSurah, ISurah } from '@/constant/surah.constant';
+import { DetailSurah, ISurah, Tafsir } from '@/constant/surah.constant';
 
 const BASE_URL = 'https://equran.id';
 
@@ -24,3 +24,14 @@ export const getSurahByNomor = async (nomor: number): Promise<DetailSurah> => {
   const surah: DetailSurah = res.data.data;
   return surah;
 };
+
+export const getTafsirByNomor = async (nomor: number): Promise<Tafsir[]> => {
+  const res = await axios.get(`${BASE_URL}/api/v2/tafsir/${nomor}`, {
+    headers: {
+      Accept: '*/*',
+      'Content-Type': 'application/json',
+    },
+  });
+  const tafsir: Tafsir[] = res.data.data.tafsir;
+  return tafsir;
+};

src/components/sidebar/sidebar.tsx

@@ -15,7 +15,6 @@ const Sidebar: React.FC = () => {
     const fetchData = async () => {
       try {
         const res = await getAllSurah();
-        console.log(res);
         setSurahs(res);
       } catch (e) {
         console.log('failed to fetch the surah');

src/components/tafsir/tafsir.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { BookOpen } from 'lucide-react';
+import { ScrollArea } from '../ui/scroll-area';
+
+interface ITafsirDialog {
+  namaSurah: string;
+  nomorAyat: number;
+  teksTafsir: string;
+}
+
+const TasfirDialog: React.FC<ITafsirDialog> = ({
+  namaSurah,
+  nomorAyat,
+  teksTafsir,
+}) => {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <button className="rounded-full bg-purple-500 p-3 duration-100 hover:bg-purple-700">
+          <BookOpen size={18} />
+        </button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="flex h-2/3 flex-col bg-slate-900 lg:max-w-screen-lg">
+        <AlertDialogHeader className="flex-shrink-0">
+          <AlertDialogTitle>
+            Tafsir {namaSurah} Ayat {nomorAyat}
+          </AlertDialogTitle>
+        </AlertDialogHeader>
+        <ScrollArea className="flex-grow">
+          <AlertDialogDescription>{teksTafsir}</AlertDialogDescription>
+        </ScrollArea>
+        <AlertDialogCancel className="flex-shrink-0 text-slate-700 duration-150 hover:bg-slate-300 hover:text-slate-900">
+          Tutup
+        </AlertDialogCancel>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default TasfirDialog;

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

src/components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/constant/surah.constant.ts

@@ -37,3 +37,8 @@ interface BriefSurah {
   namaLatin: string;
   nomor: number;
 }
+
+export interface Tafsir {
+  ayat: number;
+  teks: string;
+}

src/modules/detailSurah/detailSurah.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { getSurahByNomor } from '@/api/api';
+import { getSurahByNomor, getTafsirByNomor } from '@/api/api';
+import TasfirDialog from '@/components/tafsir/tafsir';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { DetailSurah } from '@/constant/surah.constant';
+import { DetailSurah, Tafsir } from '@/constant/surah.constant';
 import { Play } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -11,21 +12,23 @@ const DetailSurahPage: React.FC = () => {
   const pathname = usePathname();
   const nomorSurah = pathname.split('/')[1];
   const [surah, setSurah] = useState<DetailSurah>();
+  const [tafsir, setTafsir] = useState<Tafsir[]>([]);
 
   useEffect(() => {
     const fetchSurah = async () => {
       try {
         const res = await getSurahByNomor(parseInt(nomorSurah));
-        console.log(res);
         setSurah(res);
+        const res2 = await getTafsirByNomor(parseInt(nomorSurah));
+        setTafsir(res2);
       } catch (e) {
         console.log(`failed to fetch surah no ${nomorSurah}`);
       }
     };
     fetchSurah();
   }, [pathname]);
 
-  if (!surah) {
+  if (!surah || !tafsir) {
     return null;
   }
 
@@ -47,15 +50,14 @@ const DetailSurahPage: React.FC = () => {
                 <p className="text-xs md:text-sm">
                   {surah.nomor}:{ayat.nomorAyat}
                 </p>
-                <button
-                  onClick={() => {
-                    const audio = new Audio(ayat.audio[0]);
-                    audio.play();
-                  }}
-                  className="rounded-full bg-teal-500 p-3 duration-100 hover:bg-teal-700"
-                >
-                  <Play />
+                <button className="rounded-full bg-teal-500 p-3 duration-100 hover:bg-teal-700">
+                  <Play size={18} />
                 </button>
+                <TasfirDialog
+                  nomorAyat={ayat.nomorAyat}
+                  namaSurah={surah.namaLatin}
+                  teksTafsir={tafsir[ayat.nomorAyat]?.teks}
+                />
               </div>
               <div className="flex grow flex-col">
                 <p className="text-right text-lg leading-8 md:text-xl lg:text-2xl">

yarn.lock

@@ -200,6 +200,18 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
   integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
 
+"@radix-ui/react-alert-dialog@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.1.tgz#f49c987b9e4f2bf37005b3864933e2b3beac907a"
+  integrity sha512-wmCoJwj7byuVuiLKqDLlX7ClSUU0vd9sdCeM+2Ls+uf13+cpSJoMgwysHq1SGVVkJj5Xn0XWi1NoRCdkMpr6Mw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-dialog" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+
 "@radix-ui/react-compose-refs@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
@@ -210,7 +222,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8"
   integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
 
-"@radix-ui/react-dialog@^1.1.1":
+"@radix-ui/react-dialog@1.1.1", "@radix-ui/react-dialog@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44"
   integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==
@@ -305,7 +317,7 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-slot@1.1.0":
+"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
   integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==