90 lines
2 KiB
TypeScript
90 lines
2 KiB
TypeScript
import { m, Variants } from "framer-motion";
|
|
import { ReactElement } from "react";
|
|
import DashLayout from "../../layouts/DashLayout";
|
|
|
|
// not very mobile friendly yet
|
|
function Dashboard() {
|
|
return (
|
|
<>
|
|
<m.div
|
|
className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2"
|
|
variants={gridContainerVariants}
|
|
initial="initial"
|
|
animate="animate"
|
|
>
|
|
<m.div
|
|
className="col-span-1 m-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3"
|
|
variants={gridItemVariants}
|
|
>
|
|
1
|
|
</m.div>
|
|
<m.div
|
|
className="col-span-1 row-span-3 m-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3 lg:col-span-3 lg:row-span-1"
|
|
variants={gridItemVariants}
|
|
>
|
|
2
|
|
</m.div>
|
|
<m.div
|
|
className="col-span-1 m-2 rounded-2xl bg-zinc-800 bg-opacity-80 p-3"
|
|
variants={gridItemVariants}
|
|
>
|
|
3
|
|
</m.div>
|
|
<m.div
|
|
className="col-span-1 row-span-4 m-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3 lg:col-span-4 lg:row-span-1"
|
|
variants={gridItemVariants}
|
|
>
|
|
4
|
|
</m.div>
|
|
<m.div
|
|
className="col-span-1 m-2 rounded-2xl bg-zinc-800 bg-opacity-70 p-3"
|
|
variants={gridItemVariants}
|
|
>
|
|
5
|
|
</m.div>
|
|
</m.div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const gridContainerVariants: Variants = {
|
|
initial: {
|
|
opacity: 0,
|
|
y: -100,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
delay: 0.8,
|
|
staggerChildren: 0.4,
|
|
duration: 1.5,
|
|
type: "spring",
|
|
bounce: 0.5,
|
|
stiffness: 80,
|
|
},
|
|
},
|
|
};
|
|
|
|
const gridItemVariants: Variants = {
|
|
initial: {
|
|
opacity: 0,
|
|
},
|
|
animate: {
|
|
opacity: 1,
|
|
transition: {
|
|
duration: 1.0,
|
|
},
|
|
},
|
|
};
|
|
|
|
Dashboard.getLayout = function getLayout(page: ReactElement) {
|
|
const metaTags = {};
|
|
return (
|
|
<DashLayout metaTags={metaTags} navIcon="dashboard">
|
|
{page}
|
|
</DashLayout>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|