feat: improved image and rgba rendering

globus · Apr 23, 2024 · b41c8cf · b41c8cf
1 parent fa97d7f
commit b41c8cf
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 50 deletions.
diff --git a/src/components/Fields/ImageField.tsx b/src/components/Fields/ImageField.tsx
@@ -1,6 +1,19 @@
 import React, { useState } from "react";
 import Image from "next/image";
-import { Box, Code, HStack, Spinner, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Image as ChakraImage,
+  Code,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Spinner,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
 
 type Value =
   | string
@@ -20,6 +33,7 @@ function isValidValue(value: unknown): value is Value {
  * Render a field as an image.
  */
 export default function ImageField({ value }: { value: unknown }) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   if (!isValidValue(value)) {
@@ -29,31 +43,48 @@ export default function ImageField({ value }: { value: unknown }) {
   const config = typeof value === "string" ? { src: value } : value;
 
   return (
-    <Box>
-      {loading && (
-        <HStack>
-          <Spinner emptyColor="gray.200" color="blue.500" />
-          <Text>Loading image...</Text>
-        </HStack>
-      )}
-      {error && (
-        <Code fontSize="xs" variant="outline" colorScheme="orange">
-          Unable to load image.
-        </Code>
-      )}
-      {!error && (
-        <Image
-          width={200}
-          height={200}
-          src={config.src}
-          alt={config.alt ?? ""}
-          onLoad={() => setLoading(false)}
-          onError={() => {
-            setLoading(false);
-            setError(true);
-          }}
-        />
-      )}
-    </Box>
+    <>
+      <Box>
+        {loading && (
+          <HStack>
+            <Spinner emptyColor="gray.200" color="blue.500" />
+            <Text>Loading image...</Text>
+          </HStack>
+        )}
+        {error && (
+          <Code fontSize="xs" variant="outline" colorScheme="orange">
+            Unable to load image.
+          </Code>
+        )}
+        {!error && (
+          <Image
+            height={200}
+            width={200}
+            src={config.src}
+            alt={config.alt ?? ""}
+            onLoad={() => setLoading(false)}
+            onError={() => {
+              setLoading(false);
+              setError(true);
+            }}
+            onClick={onOpen}
+            style={{ cursor: "pointer" }}
+          />
+        )}
+      </Box>
+      <Modal onClose={onClose} isOpen={isOpen} size="full">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalBody>
+            <ChakraImage
+              src={config.src}
+              alt={config.alt ?? ""}
+              objectFit="contain"
+            />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
diff --git a/src/components/Fields/RgbaField.tsx b/src/components/Fields/RgbaField.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, Code, HStack } from "@chakra-ui/react";
+import { Box, Code, VStack } from "@chakra-ui/react";
 
 type Value = (string | number)[];
 
@@ -10,14 +10,26 @@ function isValidValue(value: unknown): value is Value {
 /**
  * Render a field as an RGBA color.
  */
-export default function RgbaField({ value }: { value: unknown }) {
+export default function RgbaField({
+  value,
+  size = "sm",
+}: {
+  value: unknown;
+  size?: "sm" | "lg";
+}) {
   if (!isValidValue(value)) {
     return;
   }
+
+  const props = {
+    h: size === "sm" ? "50px" : "100px",
+    w: size === "sm" ? "50px" : "100px",
+  };
+
   return (
-    <HStack>
-      <Box w="100px" h="100px" bg={`rgba(${value.join(",")})`} />
-      <Code>{value.join(",")}</Code>
-    </HStack>
+    <VStack>
+      <Box bg={`rgba(${value.join(",")})`} {...props} />
+      <Code>[{value.join(",")}]</Code>
+    </VStack>
   );
 }
diff --git a/src/components/Result.tsx b/src/components/Result.tsx
@@ -134,7 +134,6 @@ function Result({ result }: { result: GMetaResult }) {
                 link.href.fallback,
               );
             }
-            console.log(processedLink);
             return processedLink;
           },
         ),
@@ -151,7 +150,11 @@ function Result({ result }: { result: GMetaResult }) {
   return (
     <>
       <Heading as="h1" size="md" color="brand">
-        {heading}
+        {heading || (
+          <Text as="em" color="gray.500">
+            &mdash;
+          </Text>
+        )}{" "}
       </Heading>
 
       <Divider my={2} />

diff --git a/src/components/ResultListing.tsx b/src/components/ResultListing.tsx
@@ -165,24 +165,30 @@ export default function ResultListing({ gmeta }: { gmeta: GMetaResult }) {
             as={NextLink}
             href={`/results?subject=${encodeURIComponent(gmeta.subject)}`}
           >
-            {heading}
+            {heading || (
+              <Text as="em" color="gray.500">
+                &mdash;
+              </Text>
+            )}
           </Link>
         </Heading>
       </CardHeader>
-      <CardBody>
-        <HStack>
-          {image && (
-            <ImageField
-              value={{
-                src: image.src,
-                alt: image?.alt,
-              }}
-            />
-          )}
-          {summary && <Text noOfLines={[3, 5, 10]}>{summary}</Text>}
-        </HStack>
-        <ResultListingFields fields={fields} gmeta={gmeta} />
-      </CardBody>
+      {image || summary || fields ? (
+        <CardBody>
+          <HStack>
+            {image && (
+              <ImageField
+                value={{
+                  src: image.src,
+                  alt: image?.alt,
+                }}
+              />
+            )}
+            {summary && <Text noOfLines={[3, 5, 10]}>{summary}</Text>}
+          </HStack>
+          <ResultListingFields fields={fields} gmeta={gmeta} />
+        </CardBody>
+      ) : null}
     </Card>
   );
 }