xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

add page header component

This commit is contained in:
Yee Jia Wei 2023-12-16 23:15:56 +08:00
parent 04ede17bfd
commit d976761280
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/PageHeader.tsx Normal file
View File

@ -0,0 +1,23 @@
import React from "react";
export default function PageHeader({
title,
description,
icon,
}: {
title: string;
description: string;
icon: string;
}) {
return (
<div className="flex items-center gap-3">
<i
className={`${icon} text-primary text-3xl sm:text-4xl drop-shadow`}
></i>
<div>
<p className="text-3xl capitalize font-thin">{title}</p>
<p>{description}</p>
</div>
</div>
);
}

10
pages/dashboard.tsx
View File

@ -13,6 +13,7 @@ import { toast } from "react-hot-toast";
import { MigrationFormat, MigrationRequest } from "@/types/global";
import DashboardItem from "@/components/DashboardItem";
import NewLinkModal from "@/components/ModalContent/NewLinkModal";
import PageHeader from "@/components/PageHeader";
export default function Dashboard() {
const { collections } = useCollectionStore();
@ -93,14 +94,7 @@ export default function Dashboard() {
return (
<MainLayout>
<div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
<div className="flex items-center gap-3">
<i className="bi-house text-primary text-3xl sm:text-4xl drop-shadow"></i>
<div>
<p className="text-3xl capitalize font-thin">Dashboard</p>
<p>A brief overview of your data</p>
</div>
</div>
<PageHeader icon={'bi-house '} title={'Dashboard'} description={"A brief overview of your data"} />
<div>
<div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">