Skip to content

Commit

Permalink
wip: refactor nextjs/mui
Browse files Browse the repository at this point in the history
  • Loading branch information
majkshkurti committed Jul 16, 2023
1 parent 75653f5 commit 99e97d1
Show file tree
Hide file tree
Showing 82 changed files with 730 additions and 1,167 deletions.
25 changes: 24 additions & 1 deletion app/client-v2/.vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,29 @@
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
},
{
"name": "GOAT Debug (Server-Side)",
"type": "node-terminal",
"request": "launch",
"command": "pnpm run goat"
},
{
"name": "GOAT Debug (Client)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "GOAT Debug (Full Stack)",
"type": "node-terminal",
"request": "launch",
"command": "pnpm run goat",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
},
]
}
91 changes: 91 additions & 0 deletions app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
"use client";

import { makeStyles } from "@/lib/theme";
import { Text } from "@/lib/theme";
import { useTheme } from "@/lib/theme";
import { Fade, List, ListItem, ListItemButton, ListItemIcon } from "@mui/material";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";
import { useState } from "react";

import { Icon } from "@p4b/ui/components/theme";
import type { IconId } from "@p4b/ui/components/theme";

export type DashboardSidebarProps = {
items: { link: string; icon: IconId; placeholder: string }[];
width: number;
extended_width: number;
children: React.ReactNode;
};

export function DashboardSidebar(props: DashboardSidebarProps) {
const { items, children } = props;
const router = useRouter();
const { classes, cx } = useStyles(props)();
const theme = useTheme();
const [hover, setHover] = useState(false);
const pathname = usePathname();
const handleHover = () => {
setHover((currHover) => !currHover);
};
return (
<>
<nav className={cx(classes.root)} onMouseEnter={handleHover} onMouseLeave={handleHover}>
<List>
{items?.map(({ link, icon, placeholder }, indx) => (
<ListItem onClick={() => router.push(link)} disablePadding key={indx}>
<ListItemButton className={classes.itemList}>
<ListItemIcon sx={{ marginRight: "10px" }}>
<Icon
size="default"
iconId={icon}
iconVariant={
pathname.includes(link) ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
}
/>
</ListItemIcon>
{hover ? (
<Fade in={true}>
<Text typo="body 2" color={pathname.startsWith(link) ? "focus" : "primary"}>
{placeholder}
</Text>
</Fade>
) : (
<></>
)}
</ListItemButton>
</ListItem>
))}
</List>
</nav>
{children}
</>
);
}

const useStyles = (props: DashboardSidebarProps) =>
makeStyles({ name: { DashboardSidebar } })((theme) => ({
root: {
zIndex: "20",
paddingTop: "52px",
backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
cursor: "pointer",
width: props.width,
left: 0,
top: 0,
bottom: 0,
position: "fixed",
transition: "width 0.4s ease",
display: "flex",
flexDirection: "column",
boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
"&:hover": {
width: props.extended_width,
},
},
itemList: {
"&:hover": {
backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
},
},
}));
3 changes: 3 additions & 0 deletions app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function ContentPage() {
return <div>Contents Page</div>;
}
3 changes: 3 additions & 0 deletions app/client-v2/apps/goat/app/(dashboard)/help/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function HelpPage() {
return <div>Contents Page</div>;
}
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React from "react";
"use client";

import { makeStyles } from "../../../lib/ThemeProvider";
import { CardContent } from "../../Card";
import { CardMedia } from "../../Card";
import { Card } from "../../Card/Card";
import { Divider } from "../../Divider";
import { Button } from "../../theme";
import { Text } from "../../theme";
import { makeStyles } from "@/lib/theme";

import { CardContent } from "@p4b/ui/components/Card";
import { CardMedia } from "@p4b/ui/components/Card";
import { Card } from "@p4b/ui/components/Card/Card";
import { Divider } from "@p4b/ui/components/Divider";
import { Button } from "@p4b/ui/components/theme";
import { Text } from "@p4b/ui/components/theme";

export interface CardType<IconId extends string> {
title: string;
Expand All @@ -30,10 +31,6 @@ export interface CardListProps {
cards?: CardsDataArray[];
}

{
/* <Button><Text typo="label 1">+</Text><Text typo="label 2">New</Text></Button> */
}

const CardList = (props: CardListProps) => {
const { title, buttons, cards } = props;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from "react";
"use client";

import { makeStyles } from "../../../lib/ThemeProvider";
import { Card } from "../../Card";
import { TextField } from "../../Text/TextField";
import { Text } from "../../theme";
import { Button } from "../../theme";
import { makeStyles } from "@/lib/theme";

import { Card } from "@p4b/ui/components/Card";
import { TextField } from "@p4b/ui/components/Text/TextField";
import { Text } from "@p4b/ui/components/theme";
import { Button } from "@p4b/ui/components/theme";

const NewsLetterSection = () => {
const { classes, cx } = useStyles();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// import Head from "next/head";
import React from "react";
"use client";

import { makeStyles } from "@/lib/theme";

import { SlideShow } from "@p4b/ui/components/SlideShow";

import { makeStyles } from "../../../lib/ThemeProvider";
import { SlideShow } from "../../SlideShow";
import DashboardLayout from "../DashboardLayout";
import NewsLetterSection from "../home/NewsLetterSection";
import CardList, { type CardType } from "./CardList";
import NewsLetterSection from "./NewsLetterSection";

interface CardsDataArray {
content: CardType<"file">;
Expand Down Expand Up @@ -209,50 +209,29 @@ const Home = () => {
const { classes, cx } = useStyles();

return (
<DashboardLayout>
{/* <Head>
<title>Dashboard - Home</title>
<meta name="description" content="Data Dashboard" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head> */}
<div>
<SlideShow images={slideShowImages} height={328} width="100%" />
{tempCardInfo.map((cardSection: CardDataType, index: number) => (
<CardList
title={cardSection.title}
cards={cardSection.cards}
buttons={cardSection.buttons}
key={index}
/>
))}
<NewsLetterSection />
</div>
</DashboardLayout>
<>
<SlideShow images={slideShowImages} height={328} width="100%" />
{tempCardInfo.map((cardSection: CardDataType, index: number) => (
<CardList
title={cardSection.title}
cards={cardSection.cards}
buttons={cardSection.buttons}
key={index}
/>
))}
<NewsLetterSection />
</>
);
};

const useStyles = makeStyles({ name: { Home } })((theme) => ({
const useStyles = makeStyles({ name: { Home } })(() => ({
media: {
width: "100%",
height: "100px",
borderTopRightRadius: 4,
borderTopLeftRadius: 4,
objectFit: "cover",
},
// container: {
// width: "60%",
// margin: "0 auto",
// "@media (max-width: 1714px)": {
// width: "70%",
// },
// "@media (max-width: 1500px)": {
// width: "80%",
// },
// "@media (max-width: 1268px)": {
// width: "90%",
// },
// },
}));

export default Home;
Original file line number Diff line number Diff line change
@@ -1,49 +1,44 @@
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import ForwardIcon from "@mui/icons-material/Forward";
import React from "react";
"use client";

import { makeStyles } from "../../lib/ThemeProvider";
import { DashboardSidebar } from "../DashboardSidebar";
import Footer from "../Footer";
import { createIcon } from "../Icon";
import { Toolbar } from "../Toolbar";
import type { IconId } from "../theme";
import { makeStyles } from "@/lib/theme";

import Footer from "@p4b/ui/components/Footer";
import { Toolbar } from "@p4b/ui/components/Toolbar";
import { Icon } from "@p4b/ui/components/theme";
import type { IconId } from "@p4b/ui/components/theme";

import { DashboardSidebar } from "./DashboardSidebar";

interface DashboardLayoutProps {
children: React.ReactNode;
}

const { Icon } = createIcon({
info: ForwardIcon,
profile: AccountCircleIcon,
});

const DashboardLayout = ({ children }: DashboardLayoutProps) => {
const { classes, cx } = useStyles();

const items = [
{ link: "https://google.com", icon: () => <Icon iconId="profile" size="medium" iconVariant="gray2" /> },
{ link: "https://google.com", icon: () => <Icon iconId="info" size="medium" iconVariant="gray2" /> },
{ link: "https://google.com", icon: () => <Icon iconId="user" size="medium" iconVariant="gray2" /> },
{ link: "https://google.com", icon: () => <Icon iconId="help" size="medium" iconVariant="gray2" /> },
];

const sidebarItems: { link: string; icon: IconId; placeholder: string }[] = [
{
link: "https://google.com",
link: "/home",
icon: "home",
placeholder: "Home",
},
{
link: "https://google.com",
link: "/content",
icon: "folder",
placeholder: "Content",
},
{
link: "https://google.com",
link: "/settings",
icon: "settings",
placeholder: "Settings",
},
{
link: "https://google.com",
link: "/help",
icon: "help",
placeholder: "Help",
},
Expand Down Expand Up @@ -123,7 +118,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
);
};

const useStyles = makeStyles({ name: { DashboardLayout } })((theme) => ({
const useStyles = makeStyles({ name: { DashboardLayout } })(() => ({
container: {
width: "1344px",
minHeight: "100vh",
Expand Down
Loading

0 comments on commit 99e97d1

Please sign in to comment.