Skip to content

Commit

Permalink
piece sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hammad-Izhar
Hammad-Izhar committed Aug 1, 2023
1 parent 0f052ca commit 763d83b
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 96 deletions.
35 changes: 16 additions & 19 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,40 +8,27 @@ import { Box, Container, Divider, Grid } from "@mui/material";
export default function Footer() {
return (
<>
<Divider
{/* <Divider
sx={{ borderBottomWidth: 1, borderColor: "black", marginTop: "1rem" }}
/>
/> */}
<Box
sx={{
width: "100%",
height: "auto",
padding: "1rem 0",
backgroundColor: "black",
}}
>
<Container maxWidth="lg">
<Grid container direction="column" alignItems="center">
<Grid
item
xs={12}
style={{
fontSize: "1.5rem",
}}
>
Carte Blanche
</Grid>
<Grid item xs={12}>
Open to submissions at:{" "}
<Link href="mailto:[email protected]">
[email protected]
</Link>
</Grid>
<Grid container direction="column" alignItems="center" gap="0.2rem">
<Grid item xs={12}>
<Box
sx={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "10px",
color: "white",
}}
>
<Link href="https://www.instagram.com/" target="_blank">
Expand All @@ -56,7 +43,17 @@ export default function Footer() {
</Box>
</Grid>
<Grid item xs={12}>
2023 | Partnership with Full Stack at Brown
<span className="text-xs text-white md:text-lg">
2023 | Partnership with Full Stack at Brown
</span>
</Grid>
<Grid item xs={12}>
<span className="text-xs text-white md:text-lg">
Open to submissions at:{" "}
<Link href="mailto:[email protected]">
[email protected]
</Link>
</span>
</Grid>
</Grid>
</Container>
Expand Down
86 changes: 86 additions & 0 deletions src/components/PiecesSidebar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import CreateIcon from "@mui/icons-material/Create";
import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
import Box from "@mui/material/Box";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import Link from "next/link";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
import type { User } from "@prisma/client";

interface PiecesSidebarProps {
user?: User;
}

const actions = [
{
icon: (
<Link href="/upload">
<CreateIcon />
</Link>
),
name: "Create Content",
roles: ["ADMIN", "WRITER"],
},
{
icon: (
<Link href="/accounts">
<ManageAccountsIcon />
</Link>
),
name: "Manage Accounts",
roles: ["ADMIN"],
},
{
icon: <DashboardCustomizeIcon />,
name: "Customize Dashboard",
// onClick: () => setIsEditing(!isEditing),
roles: ["ADMIN"],
},
];

export default function PiecesSidebar({ user }: PiecesSidebarProps) {
return (
<div className="relative flex basis-1/4 justify-end bg-black p-10 text-right text-white">
<div className="sticky top-1/3 h-min w-full">
<p className="text-xl lowercase">Vous Avez</p>
<h1 className="text-3xl font-extrabold uppercase">Carte Blanche</h1>
{user?.role != "READER" && (
<Box sx={{ height: 320, transform: "translateZ(0px)", flexGrow: 1 }}>
<div className="flex-1" />
<SpeedDial
ariaLabel="SpeedDial basic example"
sx={{
"& .MuiFab-root": {
backgroundColor: "#fff",
},
"& .MuiFab-root:hover": {
backgroundColor: "#a5a5a5",
},
"& .MuiSpeedDialAction-fab": {
backgroundColor: "#fff",
},
}}
icon={<SpeedDialIcon style={{ color: "black" }} />}
>
{actions.map(
(action) =>
action.roles.includes(user?.role ?? "READER") && (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
// onClick={action.onClick}
/>
)
)}
</SpeedDial>
<div className="flex-1" />
</Box>
)}
</div>
</div>
);
}
Empty file added src/components/SpeedDial.tsx
View file
Empty file.
3 changes: 2 additions & 1 deletion src/components/carousel/FeaturedCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import type { Content } from "@prisma/client";
import { useState } from "react";
import { config } from "react-spring";
import CarouselItem from "./CarouselItem";
// eslint-disable-next-line
// @ts-ignore
const Carousel = loadable(() => import("react-spring-3d-carousel"));

interface IFeaturedCarouselProps {
data: Content[];
}
Expand Down
81 changes: 5 additions & 76 deletions src/pages/pieces/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import { api } from "@CarteBlanche/utils/api";
import { NextPage } from "next";
import { type NextPage } from "next";
import { useSession } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

import CircularSpinner from "@CarteBlanche/components/CircularSpinner";
import PiecesSidebar from "@CarteBlanche/components/PiecesSidebar";
import TopNav from "@CarteBlanche/components/TopNav";
import CreateIcon from "@mui/icons-material/Create";
import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
import { Button } from "@mui/material";
import Box from "@mui/material/Box";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import { Responsive, WidthProvider } from "react-grid-layout";
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
Expand All @@ -29,7 +22,6 @@ const Pieces: NextPage = () => {
{ refetchOnWindowFocus: false }
);

const isWriterOrAdmin = user?.role === "ADMIN" || user?.role === "WRITER";
const [isEditing, setIsEditing] = useState(false);

const [colScale, setColScale] = useState(12);
Expand All @@ -52,33 +44,6 @@ const Pieces: NextPage = () => {
return () => window.removeEventListener("resize", handleResize);
}, []);

const router = useRouter();

const actions = [
{
icon: <CreateIcon />,
name: "Create Content",
onClick: () => {
void router.push("/upload");
},
roles: ["ADMIN", "WRITER"],
},
{
icon: <ManageAccountsIcon />,
name: "Manage Accounts",
onClick: () => {
void router.push("/accounts");
},
roles: ["ADMIN"],
},
{
icon: <DashboardCustomizeIcon />,
name: "Customize Dashboard",
onClick: () => setIsEditing(!isEditing),
roles: ["ADMIN"],
},
];

/**
* Handles saving of the grid layout
*/
Expand Down Expand Up @@ -112,47 +77,11 @@ const Pieces: NextPage = () => {
<Button onClick={saveGridLayout}>Save</Button>
</div>
)}
<div className="m-4 flex">
<div className="absolute top-1/2">
<p className="text-transform: lowercase">Vous Avez</p>
<h1 className="text-transform: uppercase">Carte Blanche</h1>
{isWriterOrAdmin && (
<Box
sx={{ height: 320, transform: "translateZ(0px)", flexGrow: 1 }}
>
<SpeedDial
ariaLabel="SpeedDial basic example"
sx={{
position: "absolute",
bottom: 16,
right: 16,
"& .MuiFab-root": {
backgroundColor: "#3576cb",
},
"& .MuiSpeedDialAction-fab": {
backgroundColor: "#fff",
},
}}
icon={<SpeedDialIcon />}
>
{actions.map(
(action) =>
action.roles.includes(user.role) && (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={action.onClick}
/>
)
)}
</SpeedDial>
</Box>
)}
</div>
<div className="flex">
<PiecesSidebar user={user ?? undefined} />
<ResponsiveGridLayout
key={isEditing.toString()}
className="layout"
className="layout basis-3/4"
rowHeight={30}
width={1200}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
Expand Down

0 comments on commit 763d83b

Please sign in to comment.