From 9de18dc6008199768e9349c8b587db0b1daa8a1a Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 07:34:33 +0700 Subject: [PATCH 1/8] feat(detail): create sidebar --- src/app/[id]/layout.tsx | 16 ++++++ src/components/sidebar/sidebar.tsx | 82 ++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 src/app/[id]/layout.tsx create mode 100644 src/components/sidebar/sidebar.tsx diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx new file mode 100644 index 0000000..e75f2da --- /dev/null +++ b/src/app/[id]/layout.tsx @@ -0,0 +1,16 @@ +import Sidebar from '@/components/sidebar/sidebar'; + +export default function DetailLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+
{children}
+
+ +
+
+ ); +} diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx new file mode 100644 index 0000000..0636994 --- /dev/null +++ b/src/components/sidebar/sidebar.tsx @@ -0,0 +1,82 @@ +'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'; + +const Sidebar: React.FC = () => { + const [surahs, setSurahs] = useState([]); + 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(); + }, []); + + return ( +
+ {surahs.map((surah) => { + const isActive = pathname === `/${surah.nomor}`; + + return ( + +
+
+

+ {surah.nomor} +

+
+ +
+

{surah.namaLatin}

+

+ {surah.arti} +

+
+
+
+

{surah.nama}

+

+ {surah.jumlahAyat} ayat +

+
+ + ); + })} +
+ ); +}; + +export default Sidebar; From e7ed50edfec49cef7f9c58b9978a737c6bc38d2f Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 07:52:03 +0700 Subject: [PATCH 2/8] fix(detail): scrollable area --- components.json | 17 ++++++ package.json | 7 ++- src/app/[id]/layout.tsx | 9 +-- src/app/globals.css | 66 +++++++++++++++++++++ src/app/layout.tsx | 2 +- src/components/ui/scroll-area.tsx | 48 +++++++++++++++ src/lib/utils.ts | 6 ++ tailwind.config.ts | 90 ++++++++++++++++++++++------ yarn.lock | 99 +++++++++++++++++++++++++++++++ 9 files changed, 321 insertions(+), 23 deletions(-) create mode 100644 components.json create mode 100644 src/components/ui/scroll-area.tsx create mode 100644 src/lib/utils.ts diff --git a/components.json b/components.json new file mode 100644 index 0000000..cb0d435 --- /dev/null +++ b/components.json @@ -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" + } +} \ No newline at end of file diff --git a/package.json b/package.json index d724fa8..1205e20 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,18 @@ "format:fix": "prettier --write --list-different ." }, "dependencies": { + "@radix-ui/react-scroll-area": "^1.1.0", "axios": "^1.7.2", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", "daisyui": "^4.12.10", "lint-staged": "^15.2.7", "lucide-react": "^0.411.0", "next": "14.2.2", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "tailwind-merge": "^2.4.0", + "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx index e75f2da..4cc5267 100644 --- a/src/app/[id]/layout.tsx +++ b/src/app/[id]/layout.tsx @@ -1,4 +1,5 @@ import Sidebar from '@/components/sidebar/sidebar'; +import { ScrollArea } from '@/components/ui/scroll-area'; export default function DetailLayout({ children, @@ -6,11 +7,11 @@ export default function DetailLayout({ children: React.ReactNode; }>) { return ( -
-
{children}
-
+
+ {children} + -
+
); } diff --git a/src/app/globals.css b/src/app/globals.css index b5c61c9..33ce1d9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; + } +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4bdd1f6..2a9f1d8 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,7 +20,7 @@ export default function RootLayout({ return (
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx new file mode 100644 index 0000000..0b4a48d --- /dev/null +++ b/src/components/ui/scroll-area.tsx @@ -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, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..d084cca --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 30c7cca..84287e8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,24 +1,80 @@ -import type { Config } from 'tailwindcss'; +import type { Config } from "tailwindcss" -const config: Config = { +const config = { + darkMode: ["class"], content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/modules/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', - ], + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ], + prefix: "", theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", }, }, }, - plugins: [require('daisyui')], - daisyui: { - themes: ['dark', 'light'], - }, -}; -export default config; + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index f03c457..fe531a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -190,6 +190,78 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA== +"@radix-ui/number@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46" + integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ== + +"@radix-ui/primitive@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2" + integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA== + +"@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" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + +"@radix-ui/react-context@1.1.0": + version "1.1.0" + 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-direction@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc" + integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg== + +"@radix-ui/react-presence@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478" + integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/react-primitive@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884" + integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw== + dependencies: + "@radix-ui/react-slot" "1.1.0" + +"@radix-ui/react-scroll-area@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz#50b24b0fc9ada151d176395bcf47b2ec68feada5" + integrity sha512-9ArIZ9HWhsrfqS765h+GZuLoxaRHD/j0ZWOWilsCvYTpYJp8XwCqNG7Dt9Nu/TItKOdgLGkOPCodQvDc+UMwYg== + dependencies: + "@radix-ui/number" "1.1.0" + "@radix-ui/primitive" "1.1.0" + "@radix-ui/react-compose-refs" "1.1.0" + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-direction" "1.1.0" + "@radix-ui/react-presence" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@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": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + +"@radix-ui/react-use-callback-ref@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1" + integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw== + +"@radix-ui/react-use-layout-effect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" + integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== + "@rushstack/eslint-patch@^1.3.3": version "1.10.3" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz#391d528054f758f81e53210f1a1eebcf1a8b1d20" @@ -603,6 +675,13 @@ chokidar@^3.5.3: optionalDependencies: fsevents "~2.3.2" +class-variance-authority@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522" + integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A== + dependencies: + clsx "2.0.0" + cli-cursor@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-4.0.0.tgz#3cecfe3734bf4fe02a8361cbdc0f6fe28c6a57ea" @@ -623,6 +702,16 @@ client-only@0.0.1: resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== +clsx@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b" + integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== + +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + color-convert@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" @@ -2867,6 +2956,16 @@ synckit@^0.9.1: "@pkgr/core" "^0.1.0" tslib "^2.6.2" +tailwind-merge@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.4.0.tgz#1345209dc1f484f15159c9180610130587703042" + integrity sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A== + +tailwindcss-animate@^1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4" + integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA== + tailwindcss@^3.4.1: version "3.4.6" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.6.tgz#41faae16607e0916da1eaa4a3b44053457ba70dd" From cf9014c313e45fa109376e1b2d2ddf5a31634525 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 07:55:11 +0700 Subject: [PATCH 3/8] fix: overflow in root layout --- src/app/layout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2a9f1d8..9a7337f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,12 +20,12 @@ export default function RootLayout({ return (
- - {children} +
{children}
+ ); From 80539f3a1db326c6398ea9910a3acba0e66171c1 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 08:27:18 +0700 Subject: [PATCH 4/8] fix: overflow in sidebar --- src/app/[id]/layout.tsx | 8 +++----- src/app/layout.tsx | 11 +++++++++-- src/components/sidebar/sidebar.tsx | 4 ++++ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx index 4cc5267..ae96d82 100644 --- a/src/app/[id]/layout.tsx +++ b/src/app/[id]/layout.tsx @@ -1,4 +1,3 @@ -import Sidebar from '@/components/sidebar/sidebar'; import { ScrollArea } from '@/components/ui/scroll-area'; export default function DetailLayout({ @@ -7,10 +6,9 @@ export default function DetailLayout({ children: React.ReactNode; }>) { return ( -
- {children} - - +
+ + {children}
); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9a7337f..f72cefe 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,8 @@ import './globals.css'; import Header from '@/components/header/header'; import GoTopButton from '@/components/goTopButton/goTopButton'; import BackButton from '@/components/backButton/backButton'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import Sidebar from '@/components/sidebar/sidebar'; const inter = Inter({ subsets: ['latin'] }); @@ -20,10 +22,15 @@ export default function RootLayout({ return (
-
{children}
+
+
{children}
+ + + +
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 0636994..10d0ee4 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -23,6 +23,10 @@ const Sidebar: React.FC = () => { fetchData(); }, []); + if (pathname === '/') { + return null; + } + return (
{surahs.map((surah) => { From 1e61b2adf913c5c648757e486c84fed063ca50c4 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 08:36:54 +0700 Subject: [PATCH 5/8] fix: overflow in detail page --- src/app/[id]/layout.tsx | 6 ++--- src/app/layout.tsx | 4 ++-- src/modules/detailSurah/detailSurah.tsx | 30 ++++++++++++------------- 3 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx index ae96d82..af41863 100644 --- a/src/app/[id]/layout.tsx +++ b/src/app/[id]/layout.tsx @@ -6,10 +6,8 @@ export default function DetailLayout({ children: React.ReactNode; }>) { return ( -
- - {children} - +
+ {children}
); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f72cefe..6d8001e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -26,8 +26,8 @@ export default function RootLayout({ >
-
{children}
- +
{children}
+
diff --git a/src/modules/detailSurah/detailSurah.tsx b/src/modules/detailSurah/detailSurah.tsx index b27a01b..6268543 100644 --- a/src/modules/detailSurah/detailSurah.tsx +++ b/src/modules/detailSurah/detailSurah.tsx @@ -1,6 +1,7 @@ 'use client'; import { getSurahByNomor } from '@/api/api'; +import { ScrollArea } from '@/components/ui/scroll-area'; import { DetailSurah } from '@/constant/surah.constant'; import { Play } from 'lucide-react'; import { usePathname } from 'next/navigation'; @@ -25,24 +26,23 @@ const DetailSurahPage: React.FC = () => { }, [pathname]); if (!surah) { - return; + return null; } return ( -
-

- {surah.namaLatin} - {surah.nama} -

-

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

-
+
+
+

+ {surah.namaLatin} - {surah.nama} +

+

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

+
+ {surah.ayat.map((ayat, _index) => ( -
-
+
+

{surah.nomor}:{ayat.nomorAyat} @@ -69,7 +69,7 @@ const DetailSurahPage: React.FC = () => {

))} -
+
); }; From eb2fd4b608129547bf1813e70ebe53960a7f7b71 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 08:39:33 +0700 Subject: [PATCH 6/8] fix: padding in sidebar --- src/app/layout.tsx | 2 +- src/components/sidebar/sidebar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 6d8001e..472ff32 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -27,7 +27,7 @@ export default function RootLayout({
{children}
- +
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx index 10d0ee4..1d7c958 100644 --- a/src/components/sidebar/sidebar.tsx +++ b/src/components/sidebar/sidebar.tsx @@ -28,7 +28,7 @@ const Sidebar: React.FC = () => { } return ( -
+
{surahs.map((surah) => { const isActive = pathname === `/${surah.nomor}`; From b137fdeb237597b2f916664620f514fd6c6367c9 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 08:56:38 +0700 Subject: [PATCH 7/8] fix: layouting --- src/app/layout.tsx | 8 +-- src/components/header/header.tsx | 2 +- src/components/sidebar/sidebar.tsx | 85 +++++++++++++------------ src/modules/detailSurah/detailSurah.tsx | 2 +- src/modules/home/home.tsx | 3 +- 5 files changed, 52 insertions(+), 48 deletions(-) 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) => ( From c3615bae2664bbde5425e419edb5910bc8113540 Mon Sep 17 00:00:00 2001 From: iqbalpa Date: Sat, 20 Jul 2024 08:57:51 +0700 Subject: [PATCH 8/8] chore: code formatting prettier --- components.json | 2 +- src/app/globals.css | 2 +- src/components/header/header.tsx | 2 +- src/components/ui/scroll-area.tsx | 34 +++++------ src/lib/utils.ts | 6 +- src/modules/detailSurah/detailSurah.tsx | 2 +- tailwind.config.ts | 78 ++++++++++++------------- 7 files changed, 63 insertions(+), 63 deletions(-) diff --git a/components.json b/components.json index cb0d435..954465e 100644 --- a/components.json +++ b/components.json @@ -14,4 +14,4 @@ "components": "@/components", "utils": "@/lib/utils" } -} \ No newline at end of file +} diff --git a/src/app/globals.css b/src/app/globals.css index 33ce1d9..e4d90a9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -66,4 +66,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx index a5e364f..0d47da0 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/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx index 0b4a48d..1832795 100644 --- a/src/components/ui/scroll-area.tsx +++ b/src/components/ui/scroll-area.tsx @@ -1,9 +1,9 @@ -"use client" +'use client'; -import * as React from "react" -import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" +import * as React from 'react'; +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const ScrollArea = React.forwardRef< React.ElementRef, @@ -11,7 +11,7 @@ const ScrollArea = React.forwardRef< >(({ className, children, ...props }, ref) => ( @@ -20,29 +20,29 @@ const ScrollArea = React.forwardRef< -)) -ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName +)); +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; const ScrollBar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, orientation = "vertical", ...props }, ref) => ( +>(({ className, orientation = 'vertical', ...props }, ref) => ( -)) -ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName +)); +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; -export { ScrollArea, ScrollBar } +export { ScrollArea, ScrollBar }; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d084cca..9ad0df4 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import { type ClassValue, clsx } from 'clsx'; +import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } diff --git a/src/modules/detailSurah/detailSurah.tsx b/src/modules/detailSurah/detailSurah.tsx index 4803453..f3104e1 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/tailwind.config.ts b/tailwind.config.ts index 84287e8..8deeaa7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,80 +1,80 @@ -import type { Config } from "tailwindcss" +import type { Config } from 'tailwindcss'; const config = { - darkMode: ["class"], + darkMode: ['class'], content: [ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', - ], - prefix: "", + ], + prefix: '', theme: { container: { center: true, - padding: "2rem", + padding: '2rem', screens: { - "2xl": "1400px", + '2xl': '1400px', }, }, extend: { colors: { - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + border: 'hsl(var(--border))', + input: 'hsl(var(--input))', + ring: 'hsl(var(--ring))', + background: 'hsl(var(--background))', + foreground: 'hsl(var(--foreground))', primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", + DEFAULT: 'hsl(var(--primary))', + foreground: 'hsl(var(--primary-foreground))', }, secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", + DEFAULT: 'hsl(var(--secondary))', + foreground: 'hsl(var(--secondary-foreground))', }, destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", + DEFAULT: 'hsl(var(--destructive))', + foreground: 'hsl(var(--destructive-foreground))', }, muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", + DEFAULT: 'hsl(var(--muted))', + foreground: 'hsl(var(--muted-foreground))', }, accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", + DEFAULT: 'hsl(var(--accent))', + foreground: 'hsl(var(--accent-foreground))', }, popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", + DEFAULT: 'hsl(var(--popover))', + foreground: 'hsl(var(--popover-foreground))', }, card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + DEFAULT: 'hsl(var(--card))', + foreground: 'hsl(var(--card-foreground))', }, }, borderRadius: { - lg: "var(--radius)", - md: "calc(var(--radius) - 2px)", - sm: "calc(var(--radius) - 4px)", + lg: 'var(--radius)', + md: 'calc(var(--radius) - 2px)', + sm: 'calc(var(--radius) - 4px)', }, keyframes: { - "accordion-down": { - from: { height: "0" }, - to: { height: "var(--radix-accordion-content-height)" }, + 'accordion-down': { + from: { height: '0' }, + to: { height: 'var(--radix-accordion-content-height)' }, }, - "accordion-up": { - from: { height: "var(--radix-accordion-content-height)" }, - to: { height: "0" }, + 'accordion-up': { + from: { height: 'var(--radix-accordion-content-height)' }, + to: { height: '0' }, }, }, animation: { - "accordion-down": "accordion-down 0.2s ease-out", - "accordion-up": "accordion-up 0.2s ease-out", + 'accordion-down': 'accordion-down 0.2s ease-out', + 'accordion-up': 'accordion-up 0.2s ease-out', }, }, }, - plugins: [require("tailwindcss-animate")], -} satisfies Config + plugins: [require('tailwindcss-animate')], +} satisfies Config; -export default config \ No newline at end of file +export default config;