feat: add infra card to stats page, improve layout, rm animation
This commit is contained in:
parent
8af9d140da
commit
9eeefae76b
@ -1,65 +1,14 @@
|
|||||||
"use client"
|
import OperationalCosts from "@/components/cards/dashboard/statistics/OperationalCosts"
|
||||||
|
import Infrastructure from "@/components/cards/dashboard/statistics/Infrastructure"
|
||||||
import { motion } from "motion/react"
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
||||||
import { Separator } from "@/components/ui/separator"
|
|
||||||
|
|
||||||
const fadeIn = {
|
|
||||||
initial: { opacity: 0, y: 20 },
|
|
||||||
animate: { opacity: 1, y: 0 },
|
|
||||||
transition: { duration: 0.4 },
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Statistics() {
|
export default function Statistics() {
|
||||||
return (
|
return (
|
||||||
<motion.div {...fadeIn}>
|
<>
|
||||||
<h1 className="text-3xl font-bold mb-6 text-foreground">Statistics</h1>
|
<h1 className="text-3xl font-bold mb-6 text-foreground">Statistics</h1>
|
||||||
<Card className="col-span-full md:col-span-1">
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||||
<CardHeader>
|
<OperationalCosts />
|
||||||
<CardTitle>Operational Costs</CardTitle>
|
<Infrastructure />
|
||||||
<CardDescription>How much it costs us to run LibreCloud each month</CardDescription>
|
</div>
|
||||||
</CardHeader>
|
</>
|
||||||
<CardContent>
|
|
||||||
<span className="text-sm"><span className="font-bold">Month of:</span> March</span>
|
|
||||||
<Separator className="my-4" />
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="font-bold uppercase">Server</span>
|
|
||||||
<span className="font-bold uppercase">Price</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between mt-2">
|
|
||||||
<span className="text-sm">librecloud.cc (PowerEdge R630)</span>
|
|
||||||
<span>$64.99</span>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="font-bold uppercase">Domains</span>
|
|
||||||
<span className="font-bold uppercase">Price</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between mt-2">
|
|
||||||
<span className="text-sm">0 Domains</span>
|
|
||||||
<span>$0.00</span>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="font-bold uppercase">Addons</span>
|
|
||||||
<span className="font-bold uppercase">Price</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between mt-2">
|
|
||||||
<span className="text-sm">0GB Disk Space</span>
|
|
||||||
<span>$0.00</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between mt-2">
|
|
||||||
<span className="text-sm">0GB RAM</span>
|
|
||||||
<span>$0.00</span>
|
|
||||||
</div>
|
|
||||||
<Separator className="my-4" />
|
|
||||||
<div className="flex items-center justify-between mt-2">
|
|
||||||
<span className="font-bold">TOTAL</span>
|
|
||||||
<span className="font-bold">$64.99</span>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</motion.div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
76
components/cards/dashboard/statistics/Infrastructure.tsx
Normal file
76
components/cards/dashboard/statistics/Infrastructure.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
} from "@/components/ui/card"
|
||||||
|
import { Server } from "lucide-react"
|
||||||
|
import { SiCloudflare, SiCloudflarepages, SiCloudflareworkers } from "react-icons/si"
|
||||||
|
import { TbCloudNetwork } from "react-icons/tb"
|
||||||
|
|
||||||
|
export default function Infrastructure() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Infrastructure</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Our portfolio of servers and services
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div>
|
||||||
|
<p className="flex items-center">
|
||||||
|
<Server className="w-4 h-4 mr-1" />
|
||||||
|
<span className="font-bold">librecloud.cc</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">Location:</span>
|
||||||
|
<span className="ml-1">Madison, Wisconsin, USA</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">CPU:</span>
|
||||||
|
<span className="ml-1">Intel® Xeon® E5-2680 v4</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">RAM:</span>
|
||||||
|
<span className="ml-1">64GB DDR4</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">Storage:</span>
|
||||||
|
<span className="ml-1">2TB SSD</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">Uplink:</span>
|
||||||
|
<span className="ml-1">1Gbps</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
<span className="font-bold">Provider:</span>
|
||||||
|
<span className="ml-1">Felware</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4">
|
||||||
|
<p className="flex items-center">
|
||||||
|
<SiCloudflare className="w-4 h-4 mr-1" />
|
||||||
|
<span className="font-bold">Cloudflare</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">
|
||||||
|
<span>Used for DNS and websites which require low latency.</span>
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center text-sm text-muted-foreground mb-1">
|
||||||
|
<TbCloudNetwork className="w-4 h-4 mr-1" />
|
||||||
|
<span className="font-bold">DNS</span>
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center text-sm text-muted-foreground mb-1">
|
||||||
|
<SiCloudflareworkers className="w-4 h-4 mr-1" />
|
||||||
|
<span className="font-bold">Workers</span>
|
||||||
|
</p>
|
||||||
|
<p className="flex items-center text-sm text-muted-foreground mb-1">
|
||||||
|
<SiCloudflarepages className="w-4 h-4 mr-1" />
|
||||||
|
<span className="font-bold">Pages</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
58
components/cards/dashboard/statistics/OperationalCosts.tsx
Normal file
58
components/cards/dashboard/statistics/OperationalCosts.tsx
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
} from "@/components/ui/card"
|
||||||
|
import { Separator } from "@/components/ui/separator"
|
||||||
|
|
||||||
|
export default function OperationalCosts() {
|
||||||
|
return (
|
||||||
|
<Card className="col-span-full md:col-span-1">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Operational Costs</CardTitle>
|
||||||
|
<CardDescription>How much it costs us to run LibreCloud each month</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<span className="text-sm"><span className="font-bold">Month of:</span> March</span>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="font-bold uppercase">Server</span>
|
||||||
|
<span className="font-bold uppercase">Price</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-sm">librecloud.cc (PowerEdge R630)</span>
|
||||||
|
<span>$64.99</span>
|
||||||
|
</div>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="font-bold uppercase">Domains</span>
|
||||||
|
<span className="font-bold uppercase">Price</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-sm">0 Domains</span>
|
||||||
|
<span>$0.00</span>
|
||||||
|
</div>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="font-bold uppercase">Addons</span>
|
||||||
|
<span className="font-bold uppercase">Price</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-sm">0GB Disk Space</span>
|
||||||
|
<span>$0.00</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="text-sm">0GB RAM</span>
|
||||||
|
<span>$0.00</span>
|
||||||
|
</div>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
<div className="flex items-center justify-between mt-2">
|
||||||
|
<span className="font-bold">TOTAL</span>
|
||||||
|
<span className="font-bold">$64.99</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user