39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
|
import React from "react";
|
|
import { MotionBox } from "./MotionComponents";
|
|
import { MusicNote } from "@mui/icons-material";
|
|
|
|
type PlaylistCardProps = {
|
|
name: string;
|
|
onClick?: () => void;
|
|
};
|
|
export default function PlaylistCard({ name, onClick }: PlaylistCardProps) {
|
|
const theme = useTheme();
|
|
return (
|
|
<Box
|
|
display='flex'
|
|
flexDirection='column'
|
|
justifyContent='center'
|
|
onClick={onClick}
|
|
>
|
|
<MotionBox
|
|
width={120}
|
|
height={120}
|
|
display='flex'
|
|
justifyContent='center'
|
|
alignContent='center'
|
|
alignItems='center'
|
|
bgcolor='primary.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, rotate: '90deg' }}
|
|
>
|
|
<MusicNote sx={{ scale: 2 }} />
|
|
</MotionBox>
|
|
<Typography textAlign='center'>
|
|
New playlist
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
} |