Skip to content

Commit

Permalink
notebooks ui & themes
Browse files Browse the repository at this point in the history
  • Loading branch information
@potts99
potts99 committed Dec 10, 2023
1 parent 52798c0 commit dea5891
Show file tree
Hide file tree
Showing 9 changed files with 238 additions and 317 deletions.
101 changes: 75 additions & 26 deletions apps/client/layouts/newLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useCallback, useEffect, useState } from "react";

import { ContextMenu } from "@radix-ui/themes";
import useTranslation from "next-translate/useTranslation";
import { useUser } from "../store/session";

Expand Down Expand Up @@ -355,7 +356,7 @@ export default function NewLayout({ children }: any) {
{/* Static sidebar for desktop */}
<div className="hidden lg:fixed lg:inset-y-0 lg:z-10 lg:flex lg:w-64 2xl:w-72 lg:flex-col border-r-[1px]">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#ffffff] pb-4">
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-[#ffffff] dark:bg-gray-900 pb-4">
<div className="flex align-middle flex-row h-14 items-center border-b-[1px] px-6">
{/* <img className="h-8 w-auto" src="/logo.svg" alt="Workflow" /> */}
<Link href="https://peppermint.sh">
Expand All @@ -374,8 +375,8 @@ export default function NewLayout({ children }: any) {
href={item.href}
className={classNames(
item.current
? "bg-[#F0F3F9]"
: " hover:bg-[#F0F3F9]",
? "bg-[#F0F3F9] dark:bg-gray-800 dark:text-green-600"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 text-xs font-semibold leading-6"
)}
>
Expand All @@ -398,8 +399,8 @@ export default function NewLayout({ children }: any) {
href="/tickets"
className={classNames(
location.pathname === "/tickets"
? "bg-[#F0F3F9]"
: " hover:bg-[#F0F3F9]",
? "bg-[#F0F3F9] dark:bg-gray-800 dark:text-green-600"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 text-xs font-semibold leading-6"
)}
>
Expand All @@ -417,8 +418,8 @@ export default function NewLayout({ children }: any) {
href="/tickets/open"
className={classNames(
location.pathname === "/tickets/open"
? "bg-[#F0F3F9]"
: " hover:bg-[#F0F3F9]",
? "bg-[#F0F3F9] dark:bg-gray-800 dark:text-green-600"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 mll-2 text-xs font-semibold leading-6"
)}
>
Expand All @@ -436,8 +437,8 @@ export default function NewLayout({ children }: any) {
href="/tickets/closed"
className={classNames(
location.pathname === "/tickets/closed"
? "bg-[#F0F3F9]"
: " hover:bg-[#F0F3F9]",
? "bg-[#F0F3F9] dark:bg-gray-800 dark:text-green-600"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 text-xs font-semibold leading-6"
)}
>
Expand All @@ -456,23 +457,69 @@ export default function NewLayout({ children }: any) {
href="/admin"
className={classNames(
location.pathname.includes("/admin")
? "bg-[#F0F3F9]"
: "hover:bg-[#F0F3F9]",
? "bg-[#F0F3F9] dark:bg-gray-800 dark:text-green-600"
: " hover:bg-[#F0F3F9] dark:hover:bg-white dark:hover:text-gray-900 ",
"group -mx-2 flex gap-x-3 p-1 text-xs font-semibold leading-6"
)}
>
<Cog6ToothIcon
className="h-4 w-4 shrink-0 mt-1"
aria-hidden="true"
/>
<span className="whitespace-nowrap">
{t("admin_settings")}
</span>
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
a
</span>
</div>
<ContextMenu.Root>
<ContextMenu.Trigger>
<>
<Cog6ToothIcon
className="h-4 w-4 shrink-0 mt-1"
aria-hidden="true"
/>
<span className="whitespace-nowrap">
{t("admin_settings")}
</span>
<div className="flex w-full justify-end float-right">
<span className="flex h-6 w-6 shrink-0 items-center bg-transparent border-none justify-center text-md font-medium">
a
</span>
</div>
</>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item shortcut="⌘ E">
Edit
</ContextMenu.Item>
<ContextMenu.Item shortcut="⌘ D">
Duplicate
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item shortcut="⌘ N">
Archive
</ContextMenu.Item>

<ContextMenu.Sub>
<ContextMenu.SubTrigger>
More
</ContextMenu.SubTrigger>
<ContextMenu.SubContent>
<ContextMenu.Item>
Move to project…
</ContextMenu.Item>
<ContextMenu.Item>
Move to folder…
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>
Advanced options…
</ContextMenu.Item>
</ContextMenu.SubContent>
</ContextMenu.Sub>

<ContextMenu.Separator />
<ContextMenu.Item>Share</ContextMenu.Item>
<ContextMenu.Item>
Add to favorites
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item shortcut="⌘ ⌫" color="red">
Delete
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Root>
</Link>
)}
</li>
Expand All @@ -484,7 +531,7 @@ export default function NewLayout({ children }: any) {
</div>

<div className="lg:pl-64 2xl:pl-72">
<div className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 sm:gap-x-6">
<div className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white dark:bg-gray-900 px-4 sm:gap-x-6">
<button
type="button"
className="-m-2.5 p-2.5 text-white lg:hidden"
Expand Down Expand Up @@ -531,7 +578,7 @@ export default function NewLayout({ children }: any) {
</kbd>
</div>
</div> */}
<div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2">
<div className="flex w-full justify-end items-center gap-x-2 lg:gap-x-2 ">
{/* <Popover className="relative">
<Popover.Button className="relative rounded-full p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<BellAlertIcon
Expand Down Expand Up @@ -669,7 +716,9 @@ export default function NewLayout({ children }: any) {
</div>
</div>

<main className="">{children}</main>
<main className="bg-white dark:bg-gray-900 min-h-screen">
{children}
</main>
</div>
</div>
)
Expand Down
49 changes: 28 additions & 21 deletions apps/client/layouts/notebook.js → apps/client/layouts/notebook.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import { useQuery } from "react-query";
import Loader from "react-spinners/ClipLoader";

async function fetchNotebooks(token) {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/notebooks/all`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/notebooks/all`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
}
);
return res.json();
}

Expand All @@ -22,14 +25,14 @@ function classNames(...classes) {
}

export default function NoteBookLayout({ children }) {
const router = useRouter()
const router = useRouter();
const token = getCookie("session");

const { data, status, error, refetch } = useQuery(
"getUsersNotebooks",
() => fetchNotebooks(token),)
const { data, status, error, refetch } = useQuery("getUsersNotebooks", () =>
fetchNotebooks(token)
);

const [notebooks, setNotebooks] = useState();
const [notebooks, setNotebooks] = useState<any>();
const [selected, setSelected] = useState(0);

useEffect(() => {
Expand All @@ -49,18 +52,17 @@ export default function NoteBookLayout({ children }) {
{status === "success" && (
<div className="">
<div className="flex flex-row">
<div className="flex flex-col w-64">
<div className="flex flex-col w-64 border-r-[1px]">
<div className="flex-row">
<nav className="flex-1 space-y-1 px-2" aria-label="Sidebar">
<h1 className="text-3xl ml-2 font-bold">
Notebooks{" "}
<nav className="flex-1 w-full " aria-label="Sidebar">
<div className="border-b-[1px]">
<Link
className="inline-flex float-right items-center px-4 py-2 text-sm font-medium text-green-600 mt-1"
className="inline-flex items-center px-4 py-2 text-sm font-medium text-green-600"
href="/notebook/new"
>
<PlusIconMini className="h-5 w-5" aria-hidden="true" />
</Link>
</h1>
</div>
{notebooks &&
notebooks.map((item, index) => (
<Link
Expand All @@ -70,17 +72,22 @@ export default function NoteBookLayout({ children }) {
router.query.id === item.id
? "bg-green-500 text-white hover:text-white"
: "text-gray-900 hover:bg-green-500 hover:text-white hover:bg-opacity-75",
"group flex text-left px-2 py-2 w-full text-sm font-medium rounded-md "
"group flex text-left px-2 py-2 w-full text-sm font-medium border-b-[1px] border-gray-200"
)}
>
<span className="flex-1">{item.title}</span>
<div className="flex flex-row items-center justify-between w-full">
<span className="truncate">{item.title}</span>
{/* <span className="text-right text-xs">
{moment(item.updated_at).fromNow()}
</span> */}
</div>
</Link>
))}
</nav>
</div>
</div>
<div className="flex-1">
<div className="h-[80vh] px-4">{children}</div>
<div className="h-[80vh]">{children}</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit dea5891

Please sign in to comment.