Commit Basics

src/components/fullPageImage.tsx

@@ -0,0 +1,23 @@
+interface FullPageImageProps {
+  src: string;
+  alt: string;
+  credit?: string;
+  isFixed?: boolean;
+}
+
+export default function FullPageImage({ src, alt, credit, isFixed = false }: FullPageImageProps) {
+  const containerStyle = isFixed
+    ? {height: "100vh", overflow: "hidden", width: "100vw", position: "fixed" as const, top: 0, left: 0, zIndex: 0}
+    : {height: "100vh", overflow: "hidden", width: "100vw", position: "relative" as const, left: "50%", right: "50%", marginLeft: "-50vw", marginRight: "-50vw"};
+
+  return (
+    <div style={containerStyle}>
+      <img src={src} alt={alt} style={{width: "100%", height: "100%", objectFit: "cover"}} />
+      {credit && (
+        <div style={{position: "absolute", bottom: "20px", right: "20px", color: "white", fontFamily: "roboto, sans-serif", fontSize: "14px", backgroundColor: "rgba(0, 0, 0, 0.5)", padding: "8px 12px", borderRadius: "4px"}}>
+          Credit: {credit}
+        </div>
+      )}
+    </div>
+  );
+}