59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
|
|
interface CacheControlsProps {
|
|
isCacheEnabled: boolean;
|
|
toggleCache: () => void;
|
|
handleForceUpdate: () => void;
|
|
cacheExpiryTime: Date | null;
|
|
}
|
|
|
|
const CacheControls: React.FC<CacheControlsProps> = ({
|
|
isCacheEnabled,
|
|
toggleCache,
|
|
handleForceUpdate,
|
|
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 && (
|
|
<p className="text-xs text-muted-foreground">
|
|
Cache will expire automatically 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 space-x-2 py-4">
|
|
{isCacheEnabled ? (
|
|
<>
|
|
<Button variant="outline" onClick={handleForceUpdate}>
|
|
Reload via API
|
|
</Button>
|
|
<Button variant="outline" onClick={toggleCache}>
|
|
Disable Cache
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button variant="outline" onClick={toggleCache}>
|
|
Enable Cache
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CacheControls;
|