-
Notifications
You must be signed in to change notification settings - Fork 0
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
f99ed89
commit c802ae5
Showing
35 changed files
with
5,065 additions
and
2,529 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| # MUI-Sonner | ||
|
|
||
| This is a Monorepo for the mui-sonner project. You can find the package inside the `packages` folder. | ||
| This is a Monorepo for the mui-sonner project. | ||
| Read more about the project in the [README](./packages/mui-sonner/README.md) of the package. |
File renamed without changes.
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,5 +1,9 @@ | ||
| /** @type {import('next').NextConfig} */ | ||
| module.exports = { | ||
| reactStrictMode: true, | ||
| output: "export", | ||
| transpilePackages: ["mui-sonner"], | ||
| images: { | ||
| unoptimized: true, | ||
| }, | ||
| }; |
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
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,39 @@ | ||
| import Container from "@mui/material/Container"; | ||
| import { Button, Stack } from "@mui/material"; | ||
| import Intro from "@features/home/Intro"; | ||
| import { toast } from "mui-sonner"; | ||
| import ToggleCustomTheme from "@features/theme/ThemeToggle"; | ||
| import Install from "@features/home/Install"; | ||
| import Features from "@features/home/Features"; | ||
| import Usage from "@features/home/Usage"; | ||
| import Types from "@features/home/Types"; | ||
| import Position from "@features/home/Position"; | ||
| import OtherOptions from "@features/home/OtherOptions"; | ||
| import Styling from "@features/home/Styling"; | ||
|
|
||
| export default function Home({ | ||
| toggleTheme, | ||
| showCustomTheme, | ||
| }: { | ||
| toggleTheme: () => void; | ||
| showCustomTheme: boolean; | ||
| }) { | ||
| return ( | ||
| <Container maxWidth="md"> | ||
| <Stack width={1} alignItems="center" gap={6}> | ||
| <Intro /> | ||
| <Features /> | ||
| <Install /> | ||
| <Usage /> | ||
| <Types /> | ||
| <Position /> | ||
| <Styling /> | ||
| <OtherOptions /> | ||
| <ToggleCustomTheme | ||
| showCustomTheme={showCustomTheme} | ||
| toggleCustomTheme={toggleTheme} | ||
| /> | ||
| </Stack> | ||
| </Container> | ||
| ); | ||
| } |
Binary file not shown.
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,122 @@ | ||
| import { IconButton, Paper, Typography, useTheme } from "@mui/material"; | ||
| import copy from "copy-to-clipboard"; | ||
| import { useCallback, useState } from "react"; | ||
| import { motion, AnimatePresence, MotionConfig } from "framer-motion"; | ||
|
|
||
| const variants = { | ||
| visible: { opacity: 1, scale: 1 }, | ||
| hidden: { opacity: 0, scale: 0.5 }, | ||
| }; | ||
|
|
||
| interface CodeProps { | ||
| code: string; | ||
| } | ||
|
|
||
| const Code = ({ code }: CodeProps) => { | ||
| const theme = useTheme(); | ||
|
|
||
| const currentMode = theme.palette.mode; | ||
| const desiredBgColor = | ||
| currentMode === "dark" | ||
| ? theme.palette.common.white | ||
| : theme.palette.common.black; | ||
|
|
||
| const desiredTextColor = | ||
| currentMode === "dark" | ||
| ? theme.palette.common.black | ||
| : theme.palette.common.white; | ||
|
|
||
| const [copying, setCopying] = useState(0); | ||
|
|
||
| const onCopy = useCallback(() => { | ||
| copy(code); | ||
| setCopying((c) => c + 1); | ||
| setTimeout(() => { | ||
| setCopying((c) => c - 1); | ||
| }, 2000); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Paper | ||
| sx={{ | ||
| backgroundColor: desiredBgColor, | ||
| p: 2, | ||
| cursor: "pointer", | ||
| position: "relative", | ||
| }} | ||
| onClick={onCopy} | ||
| > | ||
| <Typography component="pre" sx={{ color: desiredTextColor }}> | ||
| {code} | ||
| </Typography> | ||
| <IconButton | ||
| sx={{ | ||
| position: "absolute", | ||
| right: 8, | ||
| top: "50%", | ||
| color: desiredTextColor, | ||
| transform: "translateY(-50%)", | ||
| cursor: "pointer", | ||
| borderRadius: 5, | ||
| width: 26, | ||
| height: 26, | ||
| display: "flex", | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }} | ||
| aria-label="Copy code" | ||
| > | ||
| <MotionConfig transition={{ duration: 0.15 }}> | ||
| <AnimatePresence initial={false} mode="wait"> | ||
| {copying ? ( | ||
| <motion.div | ||
| animate="visible" | ||
| exit="hidden" | ||
| initial="hidden" | ||
| key="check" | ||
| variants={variants} | ||
| > | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| width="14" | ||
| height="14" | ||
| stroke="currentColor" | ||
| strokeWidth="1.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| fill="none" | ||
| shapeRendering="geometricPrecision" | ||
| > | ||
| <path d="M20 6L9 17l-5-5"></path> | ||
| </svg> | ||
| </motion.div> | ||
| ) : ( | ||
| <motion.div | ||
| animate="visible" | ||
| exit="hidden" | ||
| initial="hidden" | ||
| key="copy" | ||
| variants={variants} | ||
| > | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| width="14" | ||
| height="14" | ||
| stroke="currentColor" | ||
| strokeWidth="1.5" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| fill="none" | ||
| shapeRendering="geometricPrecision" | ||
| > | ||
| <path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"></path> | ||
| </svg> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </MotionConfig> | ||
| </IconButton> | ||
| </Paper> | ||
| ); | ||
| }; | ||
| export default Code; |
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,20 @@ | ||
| import { Icon, CircularProgress } from "@mui/material"; | ||
| import { Toaster, ToasterProps } from "mui-sonner"; | ||
| import CloseIcon from "@mui/icons-material/Close"; | ||
|
|
||
| type CustomToasterProps = Omit<ToasterProps, "closeIcon" | "loadingIcon">; | ||
| const CustomToaster = (props: CustomToasterProps) => { | ||
| return ( | ||
| <Toaster | ||
| {...props} | ||
| closeIcon={ | ||
| <Icon sx={{ width: 24, height: 24 }}> | ||
| <CloseIcon /> | ||
| </Icon> | ||
| } | ||
| loadingIcon={<CircularProgress size={20} />} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default CustomToaster; |
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,30 @@ | ||
| import { Box, Stack } from "@mui/material"; | ||
| import { useState } from "react"; | ||
| import Code from "./Code"; | ||
|
|
||
| export type FuncData = { | ||
| component: JSX.Element; | ||
| codeString: string; | ||
| }; | ||
|
|
||
| interface FuncDisplayProps { | ||
| data: FuncData[]; | ||
| } | ||
|
|
||
| const FuncDisplay = ({ data }: FuncDisplayProps) => { | ||
| const [selected, setSelected] = useState<number>(0); | ||
| return ( | ||
| <Stack gap={2}> | ||
| <Stack direction="row" gap={2}> | ||
| {data.map((item, index) => ( | ||
| <Box key={item.codeString} onClick={() => setSelected(index)}> | ||
| {item.component} | ||
| </Box> | ||
| ))} | ||
| </Stack> | ||
| <Code code={data[selected]?.codeString as string} /> | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
| export default FuncDisplay; |
Oops, something went wrong.