mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-02-22 17:02:01 +00:00
i701
0f17800a00
- Removed unnecessary border styles from various dashboard components including Devices, DeviceDetails, Parental Control, Payments, and Users pages to enhance visual consistency. - Updated DevicesTable to utilize a new ClickableRow component for better device interaction and management. - Refactored AddDevicesToCartButton to use a checkbox for selecting devices, improving user experience. - Enhanced DeviceCard component to streamline device information display and interaction. - Overall improvements to the layout and responsiveness of the dashboard components. These changes enhance the user interface and improve the maintainability of the codebase.
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
'use client'
|
|
import { deviceCartAtom } from '@/lib/atoms'
|
|
import { cn } from '@/lib/utils'
|
|
import type { Device } from '@prisma/client'
|
|
import { useAtom } from 'jotai'
|
|
import Link from 'next/link'
|
|
import AddDevicesToCartButton from './add-devices-to-cart-button'
|
|
import BlockDeviceDialog from './block-device-dialog'
|
|
import { Badge } from './ui/badge'
|
|
|
|
export default function DeviceCard({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
|
|
const [devices, setDeviceCart] = useAtom(deviceCartAtom)
|
|
|
|
const isChecked = devices.some((d) => d.id === device.id);
|
|
|
|
return (
|
|
<div
|
|
onKeyUp={() => { }}
|
|
onClick={() => {
|
|
if (parentalControl === true) return
|
|
setDeviceCart((prev) =>
|
|
devices.some((d) => d.id === device.id)
|
|
? prev.filter((d) => d.id !== device.id)
|
|
: [...prev, device]
|
|
)
|
|
}
|
|
}
|
|
className="w-full">
|
|
<div className={cn("flex text-sm justify-between items-center my-2 p-4 border rounded-md", isChecked ? "bg-accent" : "bg-")}>
|
|
<div className=''>
|
|
<div className="font-semibold flex flex-col items-start gap-2 mb-2">
|
|
<Link
|
|
className="font-medium hover:underline"
|
|
href={`/devices/${device.id}`}
|
|
>
|
|
{device.name}
|
|
</Link>
|
|
<Badge variant={"secondary"}>
|
|
<span className="font-medium">
|
|
{device.mac}
|
|
</span>
|
|
</Badge>
|
|
</div>
|
|
|
|
{device.isActive && (
|
|
<span className="text-muted-foreground">
|
|
Active until{" "}
|
|
{new Date().toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "2-digit",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
)}
|
|
|
|
{device.blocked && (
|
|
<div className="p-2 rounded border my-2 w-full">
|
|
<span>Comment: </span>
|
|
<p className="text-neutral-500">
|
|
blocked because he was watching youtube
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
<div>
|
|
{!parentalControl ? (
|
|
<AddDevicesToCartButton device={device} />
|
|
) : (
|
|
<BlockDeviceDialog device={device} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|