36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { Add } from "@mui/icons-material";
|
|
import { Box, BoxProps, Theme, Typography, useTheme } from "@mui/material";
|
|
import React from "react";
|
|
import { MotionBox } from "./MotionComponents";
|
|
import { Variants } from "framer-motion";
|
|
|
|
export default function AddPlaylistButton(props: BoxProps) {
|
|
const theme = useTheme();
|
|
return (
|
|
<Box
|
|
display='flex'
|
|
flexDirection='column'
|
|
justifyContent='center'
|
|
{...props}
|
|
>
|
|
<MotionBox
|
|
width={120}
|
|
height={120}
|
|
display='flex'
|
|
justifyContent='center'
|
|
alignContent='center'
|
|
alignItems='center'
|
|
bgcolor='success.main'
|
|
color='success.contrastText'
|
|
borderRadius={theme.shape.borderRadius}
|
|
whileHover={{ borderRadius: '30%', scale: 0.8 }}
|
|
whileTap={{borderRadius: '40%', scale: 0.7, backgroundColor: theme.palette.info.main}}
|
|
>
|
|
<Add sx={{scale:2}} />
|
|
</MotionBox>
|
|
<Typography textAlign='center'>
|
|
New playlist
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
} |