LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

File Manager - Dashboard Routes #2

Merged
ditorodev merged 14 commits from riobuenoDevelops/fileManager-dashboard into develop 2024-03-13 17:05:35 +00:00
Conversation 1 Commits 14 Files Changed 23 +3 -11
2 changed files with 3 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1dc0a8abf5 - Show all commits

8
app/components/usage-card.tsx
View File

@ -8,14 +8,6 @@ interface UsageCardProps {
icon: React.ReactNode icon: React.ReactNode
} }
export const UsageList = ({ children }: React.PropsWithChildren<{}>) => {
return (
<div className="grid grid-cols-2 gap-8 flex-wrap w-full">
{children}
</div>
)
}
export const UsageCard = ({ usageName, monthlyUsage, currentUsage, icon }: UsageCardProps) => { export const UsageCard = ({ usageName, monthlyUsage, currentUsage, icon }: UsageCardProps) => {
return ( return (
<div className="p-8 border rounded-lg w-full"> <div className="p-8 border rounded-lg w-full">

6
app/routes/dashboard.tsx
View File

@ -1,6 +1,6 @@
import { GeneralLayout } from "~/components/general-layout"; import { GeneralLayout } from "~/components/general-layout";
import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"; import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
import { UsageCard, UsageList } from "~/components/usage-card"; import { UsageCard } from "~/components/usage-card";
import { UsageChart } from "~/components/usage-chart"; import { UsageChart } from "~/components/usage-chart";
export default function Dashboard() { export default function Dashboard() {
@ -14,7 +14,7 @@ export default function Dashboard() {
<h1 className="font-bold mb-4 text-lg">Dashboard</h1> <h1 className="font-bold mb-4 text-lg">Dashboard</h1>
<UpgradeAccountBanner /> <UpgradeAccountBanner />
<h2 className="font-bold mb-8 mt-10">Current Usage</h2> <h2 className="font-bold mb-8 mt-10">Current Usage</h2>
<UsageList> <div className="grid grid-cols-2 gap-8">
<UsageCard <UsageCard
usageName="Storage" usageName="Storage"
currentUsage={120} currentUsage={120}
@ -33,7 +33,7 @@ export default function Dashboard() {
monthlyUsage={15} monthlyUsage={15}
icon={<CloudUploadIcon className="text-ring" />} icon={<CloudUploadIcon className="text-ring" />}
/> />
</UsageList> </div>
<h2 className="font-bold mb-8 mt-10">Historical Usage</h2> <h2 className="font-bold mb-8 mt-10">Historical Usage</h2>
<div className="grid gap-8 grid-cols-2"> <div className="grid gap-8 grid-cols-2">
<UsageChart <UsageChart