generated from iqbalpa/nextjs-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1 from iqbalpa/feat/detail
Feat/detail
- Loading branch information
Showing
13 changed files
with
442 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "default", | ||
| "rsc": true, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.ts", | ||
| "css": "src/app/globals.css", | ||
| "baseColor": "gray", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { ScrollArea } from '@/components/ui/scroll-area'; | ||
|
|
||
| export default function DetailLayout({ | ||
| children, | ||
| }: Readonly<{ | ||
| children: React.ReactNode; | ||
| }>) { | ||
| return ( | ||
| <div className="flex h-screen flex-1 overflow-hidden overflow-y-auto"> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,69 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 100%; | ||
| --foreground: 224 71.4% 4.1%; | ||
| --card: 0 0% 100%; | ||
| --card-foreground: 224 71.4% 4.1%; | ||
| --popover: 0 0% 100%; | ||
| --popover-foreground: 224 71.4% 4.1%; | ||
| --primary: 220.9 39.3% 11%; | ||
| --primary-foreground: 210 20% 98%; | ||
| --secondary: 220 14.3% 95.9%; | ||
| --secondary-foreground: 220.9 39.3% 11%; | ||
| --muted: 220 14.3% 95.9%; | ||
| --muted-foreground: 220 8.9% 46.1%; | ||
| --accent: 220 14.3% 95.9%; | ||
| --accent-foreground: 220.9 39.3% 11%; | ||
| --destructive: 0 84.2% 60.2%; | ||
| --destructive-foreground: 210 20% 98%; | ||
| --border: 220 13% 91%; | ||
| --input: 220 13% 91%; | ||
| --ring: 224 71.4% 4.1%; | ||
| --radius: 0.5rem; | ||
| --chart-1: 12 76% 61%; | ||
| --chart-2: 173 58% 39%; | ||
| --chart-3: 197 37% 24%; | ||
| --chart-4: 43 74% 66%; | ||
| --chart-5: 27 87% 67%; | ||
| } | ||
|
|
||
| .dark { | ||
| --background: 224 71.4% 4.1%; | ||
| --foreground: 210 20% 98%; | ||
| --card: 224 71.4% 4.1%; | ||
| --card-foreground: 210 20% 98%; | ||
| --popover: 224 71.4% 4.1%; | ||
| --popover-foreground: 210 20% 98%; | ||
| --primary: 210 20% 98%; | ||
| --primary-foreground: 220.9 39.3% 11%; | ||
| --secondary: 215 27.9% 16.9%; | ||
| --secondary-foreground: 210 20% 98%; | ||
| --muted: 215 27.9% 16.9%; | ||
| --muted-foreground: 217.9 10.6% 64.9%; | ||
| --accent: 215 27.9% 16.9%; | ||
| --accent-foreground: 210 20% 98%; | ||
| --destructive: 0 62.8% 30.6%; | ||
| --destructive-foreground: 210 20% 98%; | ||
| --border: 215 27.9% 16.9%; | ||
| --input: 215 27.9% 16.9%; | ||
| --ring: 216 12.2% 83.9%; | ||
| --chart-1: 220 70% 50%; | ||
| --chart-2: 160 60% 45%; | ||
| --chart-3: 30 80% 55%; | ||
| --chart-4: 280 65% 60%; | ||
| --chart-5: 340 75% 55%; | ||
| } | ||
| } | ||
|
|
||
| @layer base { | ||
| * { | ||
| @apply border-border; | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| 'use client'; | ||
|
|
||
| import { getAllSurah } from '@/api/api'; | ||
| 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<ISurah[]>([]); | ||
| const pathname = usePathname(); | ||
|
|
||
| useEffect(() => { | ||
| const fetchData = async () => { | ||
| try { | ||
| const res = await getAllSurah(); | ||
| console.log(res); | ||
| setSurahs(res); | ||
| } catch (e) { | ||
| console.log('failed to fetch the surah'); | ||
| } | ||
| }; | ||
| fetchData(); | ||
| }, []); | ||
|
|
||
| if (pathname === '/') { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <ScrollArea> | ||
| <div className="hidden flex-col gap-2 p-4 md:flex"> | ||
| {surahs.map((surah) => { | ||
| const isActive = pathname === `/${surah.nomor}`; | ||
|
|
||
| return ( | ||
| <Link | ||
| href={`/${surah.nomor}`} | ||
| key={surah.nomor} | ||
| className={`group flex w-[250px] flex-row justify-between rounded-md border-[1px] border-slate-400 bg-slate-700 p-4 duration-200 hover:cursor-pointer ${ | ||
| isActive ? 'border-teal-300' : 'hover:border-teal-300' | ||
| }`} | ||
| > | ||
| <div className="flex flex-row items-center gap-3"> | ||
| <div | ||
| className={`flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 ${ | ||
| isActive ? 'bg-teal-300' : 'group-hover:bg-teal-300' | ||
| }`} | ||
| > | ||
| <p | ||
| className={`font-bold ${ | ||
| isActive ? 'text-slate-900' : 'group-hover:text-slate-900' | ||
| }`} | ||
| > | ||
| {surah.nomor} | ||
| </p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <p className="font-semibold">{surah.namaLatin}</p> | ||
| <p | ||
| className={`text-sm text-slate-400 ${ | ||
| isActive ? 'text-teal-300' : 'group-hover:text-teal-300' | ||
| }`} | ||
| > | ||
| {surah.arti} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div className="text-right"> | ||
| <p>{surah.nama}</p> | ||
| <p | ||
| className={`text-sm text-slate-400 ${ | ||
| isActive ? 'text-teal-300' : 'group-hover:text-teal-300' | ||
| }`} | ||
| > | ||
| {surah.jumlahAyat} ayat | ||
| </p> | ||
| </div> | ||
| </Link> | ||
| ); | ||
| })} | ||
| </div> | ||
| </ScrollArea> | ||
| ); | ||
| }; | ||
|
|
||
| export default Sidebar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; | ||
|
|
||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| const ScrollArea = React.forwardRef< | ||
| React.ElementRef<typeof ScrollAreaPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <ScrollAreaPrimitive.Root | ||
| ref={ref} | ||
| className={cn('relative overflow-hidden', className)} | ||
| {...props} | ||
| > | ||
| <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]"> | ||
| {children} | ||
| </ScrollAreaPrimitive.Viewport> | ||
| <ScrollBar /> | ||
| <ScrollAreaPrimitive.Corner /> | ||
| </ScrollAreaPrimitive.Root> | ||
| )); | ||
| ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; | ||
|
|
||
| const ScrollBar = React.forwardRef< | ||
| React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, | ||
| React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> | ||
| >(({ className, orientation = 'vertical', ...props }, ref) => ( | ||
| <ScrollAreaPrimitive.ScrollAreaScrollbar | ||
| ref={ref} | ||
| orientation={orientation} | ||
| className={cn( | ||
| 'flex touch-none select-none transition-colors', | ||
| orientation === 'vertical' && | ||
| 'h-full w-2.5 border-l border-l-transparent p-[1px]', | ||
| orientation === 'horizontal' && | ||
| 'h-2.5 flex-col border-t border-t-transparent p-[1px]', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> | ||
| </ScrollAreaPrimitive.ScrollAreaScrollbar> | ||
| )); | ||
| ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; | ||
|
|
||
| export { ScrollArea, ScrollBar }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { type ClassValue, clsx } from 'clsx'; | ||
| import { twMerge } from 'tailwind-merge'; | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.