From f61ba7479708577e2f6a5943a74a7c8cdb112c5d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 15 Jan 2025 15:35:49 +0530
Subject: [PATCH] Update

---
 .../components/PlaceholderThumbnails.tsx      | 68 +++++++++++--------
 1 file changed, 39 insertions(+), 29 deletions(-)

diff --git a/web/packages/new/photos/components/PlaceholderThumbnails.tsx b/web/packages/new/photos/components/PlaceholderThumbnails.tsx
index ab874848e6..1768cf9c82 100644
--- a/web/packages/new/photos/components/PlaceholderThumbnails.tsx
+++ b/web/packages/new/photos/components/PlaceholderThumbnails.tsx
@@ -5,40 +5,50 @@ import PlayCircleOutlineOutlinedIcon from "@mui/icons-material/PlayCircleOutline
 import { styled } from "@mui/material";
 import React from "react";
 
-interface Iprops {
+/**
+ * A thumbnail shown when we're loading the thumbnail for a file.
+ * @returns
+ */
+export const LoadingThumbnail = () => (
+    <Overlay sx={{ backgroundColor: "fill.faint", borderRadius: "4px" }} />
+);
+
+interface StaticThumbnailProps {
+    /**
+     * The type of the file for which we're showing the placeholder thumbnail.
+     */
     fileType: FileType;
 }
 
+/**
+ * A thumbnail shown when a file does not have a thumbnail.
+ */
+export const StaticThumbnail: React.FC<StaticThumbnailProps> = ({
+    fileType,
+}) => (
+    <CenteredOverlay
+        sx={{
+            backgroundColor: "fill.faint",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: "stroke.faint",
+            borderRadius: "4px",
+            "& > svg": {
+                color: "stroke.muted",
+                fontSize: "50px",
+            },
+        }}
+    >
+        {fileType != FileType.video ? (
+            <PhotoOutlinedIcon />
+        ) : (
+            <PlayCircleOutlineOutlinedIcon />
+        )}
+    </CenteredOverlay>
+);
+
 const CenteredOverlay = styled(Overlay)`
     display: flex;
     justify-content: center;
     align-items: center;
 `;
-
-export const StaticThumbnail: React.FC<Iprops> = (props) => {
-    return (
-        <CenteredOverlay
-            sx={(theme) => ({
-                backgroundColor: theme.colors.fill.faint,
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderColor: theme.colors.stroke.faint,
-                borderRadius: "4px",
-                "& > svg": {
-                    color: theme.colors.stroke.muted,
-                    fontSize: "50px",
-                },
-            })}
-        >
-            {props.fileType !== FileType.video ? (
-                <PhotoOutlinedIcon />
-            ) : (
-                <PlayCircleOutlineOutlinedIcon />
-            )}
-        </CenteredOverlay>
-    );
-};
-
-export const LoadingThumbnail = () => (
-    <Overlay sx={{ backgroundColor: "fill.faint", borderRadius: "4px" }} />
-);