Skip to content

Commit

Permalink
Merge branch 'dev' into Vxrcel-clean
Browse files Browse the repository at this point in the history
  • Loading branch information
kleenpulse authored Jul 29, 2024
2 parents 9fa8c3b + dc1d4eb commit 3de28ab
Show file tree
Hide file tree
Showing 12 changed files with 297 additions and 27 deletions.
20 changes: 11 additions & 9 deletions src/app/dashboard/(admin)/_components/layout/logo/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ const DashboardLogo = () => {
return (
<Link
href="/"
className="flex w-full max-w-[24px] items-center justify-center gap-2.5 py-[14px] md:justify-start"
className="flex w-full items-center justify-center gap-2.5 py-[14px] md:justify-start"
>
<Image
src="/logo/logo.png"
alt="Hgn boiler plate logo"
height={24}
width={24}
data-testid="admin-logo"
className="h-full w-full object-contain"
/>
<div>
<Image
src="/logo/logo.png"
alt="Hgn boiler plate logo"
height={24}
width={24}
data-testid="admin-logo"
className="h-full w-full object-contain"
/>
</div>
<span
className="neutral-dark hidden text-2xl font-semibold md:block"
data-testid="admin-logo-text"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
import Link from "next/link";
import { usePathname } from "next/navigation";

import DashboardLogo from "~/app/dashboard/(admin)/_components/layout/logo";
import UnreadNotificationCard from "~/app/dashboard/(admin)/_components/unread-notification-card/UnreadNotificationCard";
import Logo from "~/components/common/logo";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import {
Popover,
Expand Down Expand Up @@ -47,28 +47,28 @@ const UserNavbar = () => {
const currentPath = pathname?.split("/")[2];
return (
<nav
className="border-b-[0.5px] border-border bg-background px-5 py-2.5 md:left-[220px] lg:left-[252px]"
className="bg-white px-5 py-2.5 md:left-[220px] lg:left-[252px]"
role="navbar"
>
<div className="flex items-center justify-between gap-2">
<div className="flex w-full max-w-[470px] justify-between gap-1">
<div className="flex w-full max-w-[200px] items-center justify-start gap-1">
<Menu className="h-[18px] w-[18px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
<Logo />
<div className="flex gap-[50px]">
<div className="flex w-full items-center justify-start gap-[15px]">
<Menu className="h-[30px] w-[30px] text-neutral-dark-2 transition-all duration-300 hover:text-neutral-dark-2/50" />
<DashboardLogo />
</div>
<div className="flex w-full max-w-[290px] items-center justify-between gap-1">
<div className="hidden items-center justify-between gap-[22px] lg:flex">
{navlinks.map((item, index) => (
<Link
key={index}
href={item.link}
className={`text-sm font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
className={`text-xs font-bold transition-all duration-200 hover:text-primary ${currentPath === item.id ? "text-primary" : "text-neutral-dark-2"}`}
>
{item.route}
</Link>
))}
</div>
</div>
<div className="flex w-full max-w-[440px] items-center justify-between gap-2 bg-[#FDFDFD]">
<div className="flex items-center justify-between gap-2 bg-[#FDFDFD]">
<div className="flex h-10 items-center justify-between gap-2 rounded-[6px] border border-border bg-white px-3 text-sm font-normal placeholder:text-sm">
<SearchIcon
data-testid="search"
Expand Down
2 changes: 1 addition & 1 deletion src/app/dashboard/(user-dashboard)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function AdminLayout({
return (
<div className="grid grid-rows-[auto_1fr]">
<UserNavbar />
<div className="relative w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
<div className="relative mx-auto w-full bg-white px-2 max-lg:overflow-hidden xl:px-4">
<Suspense>{children}</Suspense>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
const organizationPath = pathname?.split("/")[4];

return (
<div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FDFDFD] pt-6 md:block md:w-[260px] md:justify-start md:px-4">
<div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FAFAFA] pt-6 md:block md:w-[304px] md:justify-start md:px-4">
<div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
<ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
<h2 className="hidden text-xl text-neutral-dark-2 md:block">
Expand Down
4 changes: 3 additions & 1 deletion src/app/dashboard/(user-dashboard)/settings/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ const layout: FC<Iproperties> = ({ children }) => {
return (
<div className="grid grid-cols-[auto_1fr]">
<SettingsSidebar />
<div className="">{children}</div>
<div className="mx-[41px] my-[30px] 2xl:mx-auto 2xl:max-w-[975px]">
{children}
</div>
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
interface IProperties {
notificationTitle: string;
}

const NotificationHeader = ({ notificationTitle }: IProperties) => {
return (
<h4 className="mb-[17px] text-[24px] font-[700]">{notificationTitle}</h4>
);
};

NotificationHeader.PreviewProps = {
notificationTitle: `Notification Alert`,
} satisfies IProperties;

export default NotificationHeader;
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Switch } from "~/components/ui/switch";

interface IProperties {
title: string;
description: string;
}

const NotificationSwitchBox = ({ title, description }: IProperties) => {
return (
<section className="flex w-full items-center justify-between">
<div className="w-[55%]">
<p className="mb-[8px] font-[600]">{title}</p>
<p className="text-[14px] text-neutral-dark-1">{description}</p>
</div>
<div>
<Switch />
</div>
</section>
);
};

export default NotificationSwitchBox;
128 changes: 125 additions & 3 deletions src/app/dashboard/(user-dashboard)/settings/notification/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,127 @@
const page = () => {
return <div>page</div>;
"use client";

import { Check } from "lucide-react";
import { useState } from "react";

import CustomButton from "~/components/common/common-button/common-button";
import NotificationSettingSavedModal from "~/components/common/modals/notification-settings-saved";
import NotificationHeader from "./_components/header";
import NotificationSwitchBox from "./_components/notification-switch-box";

const NotificationPage = () => {
const [isOpen, setOpen] = useState(false);

const handleOpenModal = () => {
setOpen(true);
};

return (
<main className="text-neutral-dark-2">
{/* NOTIFICATION ALERT */}
<section>
<NotificationHeader notificationTitle={"Notification Alert"} />
<NotificationSwitchBox
title={"Mobile push notifications"}
description={
"Receive push notifications on mentions and comments via your mobile app"
}
/>
</section>
{/* EMAIL NOTIFICATION */}
<section className="my-[30px]">
<NotificationHeader notificationTitle={"Email notifications"} />
<section className="flex flex-col gap-[24px]">
{/* option 1 */}
<div>
<NotificationSwitchBox
title={"Activity in your workspace"}
description={
"Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
}
/>
</div>
{/* option 2 */}
<div>
<NotificationSwitchBox
title={"Activity in your workspace"}
description={
"Receive emails about activity in your workspace, even when you are active on the app"
}
/>
</div>
{/* option 3 */}
<div>
<NotificationSwitchBox
title={"Email digests"}
description={
"Receive email digest every 8 hours for changes to pages you are subscribed to"
}
/>
</div>
{/* option 4 */}
<div>
<NotificationSwitchBox
title={"Announcements and update emails"}
description={
"Receive occasional emails about product launches and new features from notion"
}
/>
</div>
</section>
</section>
{/* SLACK NOTIFICATIONS */}
<section className="my-[30px]">
<NotificationHeader notificationTitle={"Slack notifications"} />
<section className="flex flex-col gap-[24px]">
{/* option 1 */}
<div>
<NotificationSwitchBox
title={"Activity in your workspace"}
description={
"Receive emails when you get comments, mentions, page invites, reminders, access requests, and property changes"
}
/>
</div>
{/* option 2 */}
<div>
<NotificationSwitchBox
title={"Always send email notifications"}
description={
"Receive emails about activity in your workspace, even when you are active on the app"
}
/>
</div>
{/* option 3 */}
<div>
<NotificationSwitchBox
title={"Announcements and update emails"}
description={
"Receive email digest every 8 hours for changes to pages you are subscribed to"
}
/>
</div>
</section>
</section>
<section className="text-end">
<CustomButton
variant="primary"
icon={<Check />}
isLeftIconVisible={true}
isLoading={false}
isDisabled={false}
onClick={handleOpenModal}
>
Save Changes
</CustomButton>
<NotificationSettingSavedModal
show={isOpen}
onClose={function (): void {
setOpen(false);
}}
/>
</section>
</main>
);
};

export default page;
export default NotificationPage;
2 changes: 1 addition & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
return (
<html lang="en">
<body className={inter.className}>
<div className="mx-auto w-full max-w-[1440px]">
<div className="mx-auto w-full">
<Providers />
{children}
<Toaster />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import { usePathname } from "next/navigation";
import React from "react";

import CustomButton from "~/components/common/common-button/common-button";
Expand All @@ -20,11 +21,18 @@ const NotificationSettingSavedModal: React.FC<ModalProperties> = ({
show,
onClose,
}) => {
const pathname = usePathname();
/**
* @kinxlo
* check if pathname == "notification", apply the blur effect
*/
const isNotificationPath = pathname.includes("notification");

return (
<Dialog open={show} onOpenChange={onClose}>
<DialogOverlay
data-testid="overlay"
className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
className={`fixed inset-0 z-50 flex items-center justify-center ${isNotificationPath ? "bg-transparent backdrop-blur-sm" : "bg-black bg-opacity-50"}`}
/>
<DialogContent
className="mx-10 rounded-md bg-white p-6 shadow-md"
Expand Down
Loading

0 comments on commit 3de28ab

Please sign in to comment.