-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e39a4a9
commit 856aafc
Showing
7 changed files
with
124 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 25 additions & 3 deletions
28
app/client-v2/apps/goat/app/(dashboard)/content/PreviewMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,39 @@ | ||
import ContentPage from "@/app/(dashboard)/content/page"; | ||
import { makeStyles } from "@/lib/theme"; | ||
import "mapbox-gl/dist/mapbox-gl.css"; | ||
import React from "react"; | ||
|
||
import BasicAccordion from "@p4b/ui/components/BasicAccordion"; | ||
import { TextField } from "@p4b/ui/components/Text/TextField"; | ||
|
||
const useStyles = () => | ||
makeStyles({ name: { ContentPage } })(() => ({ | ||
makeStyles({ name: { PreviewMenu } })(() => ({ | ||
root: { | ||
width: "280px", | ||
borderRadius: "4px", | ||
border: "1px solid var(--light-primary-shades-8-p, rgba(43, 179, 129, 0.08))", | ||
boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)", | ||
background: "#FAFAFA", | ||
padding: "16px", | ||
display: "flex", | ||
flexDirection: "column", | ||
gap: "16px", | ||
}, | ||
})); | ||
|
||
export default function PreviewMenu() { | ||
const { classes, cx } = useStyles()(); | ||
|
||
return <div className={cx(classes.root)}>Menu</div>; | ||
return ( | ||
<div className={cx(classes.root)}> | ||
<TextField id="outlined-basic" label="342423432.xml" variant="outlined" /> | ||
<BasicAccordion title="Info"> | ||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div> | ||
</BasicAccordion> | ||
<BasicAccordion title="Attributes"> | ||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div> | ||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div> | ||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, rem.</div> | ||
</BasicAccordion> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import * as React from 'react'; | ||
import Accordion from '@mui/material/Accordion'; | ||
import AccordionSummary from '@mui/material/AccordionSummary'; | ||
import AccordionDetails from '@mui/material/AccordionDetails'; | ||
import Typography from '@mui/material/Typography'; | ||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; | ||
import { ReactNode } from "react"; | ||
import { makeStyles } from "../lib/ThemeProvider"; | ||
|
||
export type BasicAccordionTypes = { | ||
className?: string; | ||
title: string; | ||
children: NonNullable<ReactNode>; | ||
}; | ||
|
||
|
||
const useStyles = () => | ||
makeStyles({ name: { BasicAccordion } })(() => ({ | ||
root: {}, | ||
content: { | ||
padding: '0 16px' | ||
} | ||
})); | ||
|
||
export default function BasicAccordion(props: BasicAccordionTypes) { | ||
|
||
const { children, title } = props | ||
|
||
const { classes, cx } = useStyles()(); | ||
|
||
|
||
return ( | ||
<div className={cx(classes.root)}> | ||
<Accordion> | ||
<AccordionSummary | ||
expandIcon={<ExpandMoreIcon />} | ||
aria-controls="panel1a-content" | ||
id="panel1a-header" | ||
className={cx(classes.content)} | ||
> | ||
<Typography>{ title }</Typography> | ||
</AccordionSummary> | ||
<AccordionDetails className={cx(classes.content)}> | ||
{children} | ||
</AccordionDetails> | ||
</Accordion> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters