SVI/Proxmox
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Styling of CacheControls

Browse Source
This commit is contained in:
Bram Suurd
2024-06-04 21:26:56 +02:00
parent 66efa8dd09
commit e466201305
1 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
components/CacheControls.tsx
View File

@@ -1,5 +1,6 @@
import { Button } from "@/components/ui/button";
import { DatabaseBackup, Database, DatabaseZap } from "lucide-react";
import { Separator } from "./ui/separator";
interface CacheControlsProps {
isCacheEnabled: boolean;
@@ -15,52 +16,55 @@ const CacheControls: React.FC<CacheControlsProps> = ({
cacheExpiryTime,
}) => {
return (
<div className="mt-4 grid animate-fade-up grid-cols-1 gap-4 px-4">
<div className="text-center">
{isCacheEnabled ? (
<>
<p className="text-xs text-muted-foreground">
The scripts are cached in your browser to optimize performance.
Use the button below to re-poll the server for changes.
</p>
{cacheExpiryTime && (
<div className="flex flex-col">
<Separator className="w-screen"/>
<div className="mt-6 grid animate-fade-up grid-cols-1 gap-4 px-4">
<div className="text-center">
{isCacheEnabled ? (
<>
<p className="text-xs text-muted-foreground">
Cache will expire automatically on{" "}
{cacheExpiryTime.toLocaleDateString()} at{" "}
{cacheExpiryTime.toLocaleTimeString()}
The scripts are cached in your browser to optimize performance.
Use the button below to re-poll the server for changes.
</p>
)}
</>
) : (
<p className="text-xs text-muted-foreground">
The cache is disabled. All data will be fetched from the server.
</p>
)}
</div>
<div className="flex justify-center space-x-2 py-4">
{isCacheEnabled ? (
<>
<Button variant="outline" onClick={handleForceUpdate}>
<span className="flex items-center space-x-2">
<DatabaseBackup className="h-4 w-4" />
<span>Reload via API</span>
</span>
</Button>
{cacheExpiryTime && (
<p className="text-xs text-muted-foreground">
Cache will expire automatically on{" "}
{cacheExpiryTime.toLocaleDateString()} at{" "}
{cacheExpiryTime.toLocaleTimeString()}
</p>
)}
</>
) : (
<p className="text-xs text-muted-foreground">
The cache is disabled. All data will be fetched from the server.
</p>
)}
</div>
<div className="flex justify-center gap-2">
{isCacheEnabled ? (
<>
<Button variant="outline" onClick={handleForceUpdate}>
<span className="flex items-center space-x-2">
<DatabaseBackup className="h-4 w-4" />
<span>Reload via API</span>
</span>
</Button>
<Button variant="outline" onClick={toggleCache}>
<span className="flex items-center space-x-2">
<Database className="h-4 w-4" />
<span>Disable Cache</span>
</span>
</Button>
</>
) : (
<Button variant="outline" onClick={toggleCache}>
<span className="flex items-center space-x-2">
<Database className="h-4 w-4" />
<span>Disable Cache</span>
<DatabaseZap className="h-4 w-4" />
<span>Enable Cache</span>
</span>
</Button>
</>
) : (
<Button variant="outline" onClick={toggleCache}>
<span className="flex items-center space-x-2">
<DatabaseZap className="h-4 w-4" />
<span>Enable Cache</span>
</span>
</Button>
)}
)}
</div>
</div>
</div>
);