Skip to content

Commit 15fb55c

Browse files
mpsalungggmpsalunggg
authored
[FEAT] - Responsif sidebar & Detail Testimoni
[FEAT] - Responsif sidebar & Detail Testimoni
2 parents 823f619 + a248e94 commit 15fb55c

File tree

16 files changed

+344
-42
lines changed

16 files changed

+344
-42
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
}
2121
},
2222
"dependencies": {
23+
"@radix-ui/react-alert-dialog": "^1.1.1",
24+
"@radix-ui/react-dialog": "^1.1.1",
2325
"@radix-ui/react-dropdown-menu": "^2.1.1",
2426
"@radix-ui/react-select": "^2.1.1",
2527
"@radix-ui/react-slot": "^1.1.0",

‎src/components/common/navbar/NavbarList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { pathnames } from "@/lib/config";
44

55
export type NavbarListProps<Pathname extends keyof typeof pathnames> = ComponentProps<typeof Link<Pathname>>;
66

7-
function NavbarList<Pathname extends keyof typeof pathnames>({ href, ...rest }: NavbarListProps<Pathname>) {
7+
function NavbarList<Pathname extends keyof typeof pathnames>({ href, onClick, ...rest }: NavbarListProps<Pathname>) {
88
return (
9-
<Link href={href}>
9+
<Link href={href} onClick={onClick}>
1010
<span>{rest.title}</span>
1111
</Link>
1212
);

‎src/components/common/navbar/index.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ModeToggle } from "../mode-toggle";
55
import { useTranslations } from "next-intl";
66
import LocaleToggle from "../locale-toggle";
77
import { LINK } from "./constant";
8+
import Sidebar from "../sidebar";
89

910
const Navbar = () => {
1011
const t = useTranslations("Layout");
@@ -16,7 +17,7 @@ const Navbar = () => {
1617
<div className="w-10 h-8 bg-[url('/assets/icons/ic_hmc-light.svg')] dark:bg-[url('/assets/icons/ic_hmc-dark.svg')] bg-cover bg-center"></div>
1718
</Link>
1819

19-
<nav className="flex items-center gap-7">
20+
<nav className="lg:flex items-center gap-7 hidden">
2021
{LINK.map(({ href, id }) => (
2122
<NavbarList key={id} href={href} title={t(`navbar.link-${id}`)} />
2223
))}
@@ -25,6 +26,9 @@ const Navbar = () => {
2526
<LocaleToggle />
2627
</div>
2728
</nav>
29+
<div className="lg:hidden flex">
30+
<Sidebar />
31+
</div>
2832
</div>
2933
</div>
3034
</header>

‎src/components/common/sidebar/index.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
import { FC, useState } from "react";
3+
import { Menu } from "lucide-react";
4+
import Link from "next/link";
5+
import { useTranslations } from "next-intl";
6+
7+
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
8+
import NavbarList from "../navbar/NavbarList";
9+
import { ModeToggle } from "../mode-toggle";
10+
import LocaleToggle from "../locale-toggle";
11+
import { LINK } from "../navbar/constant";
12+
13+
const Sidebar: FC = () => {
14+
const t = useTranslations("Layout");
15+
const [isOpen, setIsOpen] = useState(false);
16+
17+
return (
18+
<Sheet open={isOpen} onOpenChange={setIsOpen}>
19+
<SheetTrigger className="border rounded-sm p-2">
20+
<Menu className="h-4 w-4" />
21+
</SheetTrigger>
22+
<SheetContent side="top" className="w-screen">
23+
<SheetHeader>
24+
<SheetTitle className="flex justify-center ml-2">
25+
<Link href="/" onClick={() => setIsOpen(false)}>
26+
<div className="w-10 h-8 bg-[url('/assets/icons/ic_hmc-light.svg')] dark:bg-[url('/assets/icons/ic_hmc-dark.svg')] bg-cover bg-center"></div>
27+
</Link>
28+
</SheetTitle>
29+
<SheetDescription>
30+
<nav className="flex flex-col items-center gap-4 mt-2">
31+
{LINK.map(({ href, id }) => (
32+
<NavbarList key={id} href={href} title={t(`navbar.link-${id}`)} onClick={() => setIsOpen(false)} />
33+
))}
34+
<div className="flex gap-2 items-center">
35+
<ModeToggle />
36+
<LocaleToggle />
37+
</div>
38+
</nav>
39+
</SheetDescription>
40+
</SheetHeader>
41+
</SheetContent>
42+
</Sheet>
43+
);
44+
};
45+
export default Sidebar;

‎src/components/ui/dialog.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as DialogPrimitive from "@radix-ui/react-dialog";
5+
import { X } from "lucide-react";
6+
7+
import { cn } from "@/lib/utils";
8+
9+
const Dialog = DialogPrimitive.Root;
10+
11+
const DialogTrigger = DialogPrimitive.Trigger;
12+
13+
const DialogPortal = DialogPrimitive.Portal;
14+
15+
const DialogClose = DialogPrimitive.Close;
16+
17+
const DialogOverlay = React.forwardRef<
18+
React.ElementRef<typeof DialogPrimitive.Overlay>,
19+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20+
>(({ className, ...props }, ref) => (
21+
<DialogPrimitive.Overlay
22+
ref={ref}
23+
className={cn(
24+
"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",
25+
className
26+
)}
27+
{...props}
28+
/>
29+
));
30+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31+
32+
const DialogContent = React.forwardRef<
33+
React.ElementRef<typeof DialogPrimitive.Content>,
34+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35+
>(({ className, children, ...props }, ref) => (
36+
<DialogPortal>
37+
<DialogOverlay />
38+
<DialogPrimitive.Content
39+
ref={ref}
40+
className={cn(
41+
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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",
42+
className
43+
)}
44+
{...props}
45+
>
46+
{children}
47+
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
48+
<X className="h-4 w-4" />
49+
<span className="sr-only">Close</span>
50+
</DialogPrimitive.Close>
51+
</DialogPrimitive.Content>
52+
</DialogPortal>
53+
));
54+
DialogContent.displayName = DialogPrimitive.Content.displayName;
55+
56+
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
57+
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
58+
);
59+
DialogHeader.displayName = "DialogHeader";
60+
61+
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
62+
<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
63+
);
64+
DialogFooter.displayName = "DialogFooter";
65+
66+
const DialogTitle = React.forwardRef<
67+
React.ElementRef<typeof DialogPrimitive.Title>,
68+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
69+
>(({ className, ...props }, ref) => (
70+
<DialogPrimitive.Title
71+
ref={ref}
72+
className={cn("text-lg font-semibold leading-none tracking-tight", className)}
73+
{...props}
74+
/>
75+
));
76+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
77+
78+
const DialogDescription = React.forwardRef<
79+
React.ElementRef<typeof DialogPrimitive.Description>,
80+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
81+
>(({ className, ...props }, ref) => (
82+
<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
83+
));
84+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
85+
86+
export {
87+
Dialog,
88+
DialogPortal,
89+
DialogOverlay,
90+
DialogClose,
91+
DialogTrigger,
92+
DialogContent,
93+
DialogHeader,
94+
DialogFooter,
95+
DialogTitle,
96+
DialogDescription,
97+
};

‎src/components/ui/sheet.tsx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as SheetPrimitive from "@radix-ui/react-dialog";
5+
import { cva, type VariantProps } from "class-variance-authority";
6+
import { X } from "lucide-react";
7+
8+
import { cn } from "@/lib/utils";
9+
10+
const Sheet = SheetPrimitive.Root;
11+
12+
const SheetTrigger = SheetPrimitive.Trigger;
13+
14+
const SheetClose = SheetPrimitive.Close;
15+
16+
const SheetPortal = SheetPrimitive.Portal;
17+
18+
const SheetOverlay = React.forwardRef<
19+
React.ElementRef<typeof SheetPrimitive.Overlay>,
20+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
21+
>(({ className, ...props }, ref) => (
22+
<SheetPrimitive.Overlay
23+
className={cn(
24+
"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",
25+
className
26+
)}
27+
{...props}
28+
ref={ref}
29+
/>
30+
));
31+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
32+
33+
const sheetVariants = cva(
34+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
35+
{
36+
variants: {
37+
side: {
38+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39+
bottom:
40+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42+
right:
43+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44+
},
45+
},
46+
defaultVariants: {
47+
side: "right",
48+
},
49+
}
50+
);
51+
52+
interface SheetContentProps
53+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
54+
VariantProps<typeof sheetVariants> {}
55+
56+
const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
57+
({ side = "right", className, children, ...props }, ref) => (
58+
<SheetPortal>
59+
<SheetOverlay />
60+
<SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
61+
{children}
62+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
63+
<X className="h-4 w-4" />
64+
<span className="sr-only">Close</span>
65+
</SheetPrimitive.Close>
66+
</SheetPrimitive.Content>
67+
</SheetPortal>
68+
)
69+
);
70+
SheetContent.displayName = SheetPrimitive.Content.displayName;
71+
72+
const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
73+
<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
74+
);
75+
SheetHeader.displayName = "SheetHeader";
76+
77+
const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
78+
<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
79+
);
80+
SheetFooter.displayName = "SheetFooter";
81+
82+
const SheetTitle = React.forwardRef<
83+
React.ElementRef<typeof SheetPrimitive.Title>,
84+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
85+
>(({ className, ...props }, ref) => (
86+
<SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
87+
));
88+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
89+
90+
const SheetDescription = React.forwardRef<
91+
React.ElementRef<typeof SheetPrimitive.Description>,
92+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
93+
>(({ className, ...props }, ref) => (
94+
<SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
95+
));
96+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
97+
98+
export {
99+
Sheet,
100+
SheetPortal,
101+
SheetOverlay,
102+
SheetTrigger,
103+
SheetClose,
104+
SheetContent,
105+
SheetHeader,
106+
SheetFooter,
107+
SheetTitle,
108+
SheetDescription,
109+
};

‎src/features/home/components/DetailTestimoni.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { FC } from "react";
2+
import { TestimonialType } from "../types";
3+
import Image from "next/image";
4+
5+
import { DialogContent } from "@/components/ui/dialog";
6+
7+
const DetailTestimoni: FC<{ data: TestimonialType }> = ({ data }) => {
8+
return (
9+
<DialogContent>
10+
<div className="flex md:flex-row flex-col md:items-center items-start gap-2">
11+
<Image
12+
src={data.avatar_url}
13+
alt={data.name}
14+
width={512}
15+
height={512}
16+
className="lg:w-14 w-16 lg:h-14 h-16 object-cover border-2 rounded-full"
17+
/>
18+
<div className="flex flex-col gap-1">
19+
<h3>{data.name}</h3>
20+
<p className="sm:text-sm text-xs text-slate-400 dark:text-slate-400">{data.role}</p>
21+
</div>
22+
</div>
23+
<p className="sm:text-sm text-xs text-slate-500 dark:text-slate-400 sm:leading-6 leading-5">{`"${data.quote}"`}</p>
24+
</DialogContent>
25+
);
26+
};
27+
export default DetailTestimoni;

‎src/features/home/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import HeroSection from "./components/HeroSection";
2-
import PartnerSection from "./components/PartnerSection";
3-
import AboutSection from "./components/AboutSection";
4-
import ProgramSection from "./components/ProgramSection";
5-
import ClassSection from "./components/ClassSection";
6-
import TestimonialSection from "./components/TestimonialSection";
7-
import ContactSection from "./components/ContactSection";
1+
import HeroSection from "./sections/HeroSection";
2+
import PartnerSection from "./sections/PartnerSection";
3+
import AboutSection from "./sections/AboutSection";
4+
import ProgramSection from "./sections/ProgramSection";
5+
import ClassSection from "./sections/ClassSection";
6+
import TestimonialSection from "./sections/TestimonialSection";
7+
import ContactSection from "./sections/ContactSection";
88

99
const Home = () => {
1010
return (

‎src/features/home/components/AboutSection.tsx‎ renamed to ‎src/features/home/sections/AboutSection.tsx‎

File renamed without changes.

‎src/features/home/components/ClassSection.tsx‎ renamed to ‎src/features/home/sections/ClassSection.tsx‎

File renamed without changes.

0 commit comments

Comments
 (0)