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 { 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 },
|
||||
}
|
||||
import OperationalCosts from "@/components/cards/dashboard/statistics/OperationalCosts"
|
||||
import Infrastructure from "@/components/cards/dashboard/statistics/Infrastructure"
|
||||
|
||||
export default function Statistics() {
|
||||
return (
|
||||
<motion.div {...fadeIn}>
|
||||
<>
|
||||
<h1 className="text-3xl font-bold mb-6 text-foreground">Statistics</h1>
|
||||
<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 className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<OperationalCosts />
|
||||
<Infrastructure />
|
||||
</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