39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { X, ExternalLink } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import Image from "next/image";
|
|
|
|
interface PeriodicTableProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function PeriodicTable({ isOpen, onClose }: PeriodicTableProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md">
|
|
<div className="bg-background border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col w-[95vw] max-w-[1400px] h-[95vh]">
|
|
<div className="p-4 border-b border-border flex justify-between items-center bg-secondary/80">
|
|
<h3 className="font-bold text-lg">Periodic Table of Elements</h3>
|
|
<div className="flex gap-2">
|
|
<button onClick={onClose} className="text-muted-foreground hover:text-foreground ml-2 p-2">
|
|
<X size={24} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 bg-white p-4 flex items-center justify-center overflow-auto">
|
|
<div className="relative min-w-[1000px] w-full h-full flex items-center justify-center">
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Periodic_table_large.svg/1920px-Periodic_table_large.svg.png"
|
|
alt="Periodic Table"
|
|
className="object-contain w-full h-full max-h-[90vh]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|