fix: install sharp for next image optimization

mheidinger · Jul 12, 2024 · bf2af35 · bf2af35
1 parent 6f1fdf7
commit bf2af35
Show file tree

Hide file tree

Showing 7 changed files with 763 additions and 72 deletions.
diff --git a/components/DishImage.tsx b/components/DishImage.tsx
@@ -1,5 +1,6 @@
 import { default as Image, ImageProps } from "next/image";
 import { useState } from "react";
+import placeholderImg from "../public/img/placeholder.jpg";
 
 type Props = Omit<ImageProps, "src"> & {
   s3Url?: string;
@@ -9,14 +10,9 @@ const DishImage = (props: Props) => {
   const { s3Url, ...imageProps } = props;
   const [showPlaceholder, setShowPlaceholder] = useState(false);
 
-  let src = "/img/placeholder.jpg";
-  if (s3Url && s3Url !== "" && !showPlaceholder) {
-    src = s3Url;
-  }
-
   return (
     <Image
-      src={src}
+      src={s3Url && !showPlaceholder ? s3Url : placeholderImg}
       onError={() => setShowPlaceholder(true)}
       fill
       style={{ objectFit: "cover" }}

diff --git a/components/Inputs.tsx b/components/Inputs.tsx
@@ -8,7 +8,7 @@ export const InputRow = styled.div<
   display: flex;
   justify-content: space-between;
   margin-top: 1rem;
-  margin-bottom: ${({$headingRow}) => ($headingRow ? "-.5rem" : "0")};
+  margin-bottom: ${({ $headingRow }) => ($headingRow ? "-.5rem" : "0")};
   gap: 5px;
 `;
 
@@ -18,11 +18,11 @@ export const InputLabel = styled.label<
   font-size: var(--font-size-base);
   font-weight: 600;
   margin: auto 0;
-  margin-left: ${({$indent}) => ($indent ? "3rem" : "0")};
-  ${({width}) => (width ? `width: ${width};` : "")}
+  margin-left: ${({ $indent }) => ($indent ? "3rem" : "0")};
+  ${({ width }) => (width ? `width: ${width};` : "")}
 
   @media screen and (max-width: ${COLUMN_MAX_WIDTH}) {
-    margin-left: ${({$indent}) => ($indent ? "1rem" : "0")};
+    margin-left: ${({ $indent }) => ($indent ? "1rem" : "0")};
   }
 `;
 
@@ -38,10 +38,10 @@ export const Input = styled.input<
   appearance: none;
   color: var(--color-text-primary);
   height: 2.5rem;
-  filter: ${({disabled}) =>
+  filter: ${({ disabled }) =>
     disabled ? "brightness(150%)" : "brightness(100%)"};
-  flex-grow: ${({$grow}) => $grow || 0};
-  ${({width}) => (width ? `width: ${width};` : "")}
+  flex-grow: ${({ $grow }) => $grow || 0};
+  ${({ width }) => (width ? `width: ${width};` : "")}
 `;
 
 export const Select = styled.select<
@@ -60,8 +60,8 @@ export const Select = styled.select<
   background-size: 1em;
   color: var(--color-text-primary);
   height: 2.5rem;
-  ${({width}) => (width ? `width: ${width};` : "")}
-  flex-grow: ${({$grow}) => $grow || 0};
+  ${({ width }) => (width ? `width: ${width};` : "")}
+  flex-grow: ${({ $grow }) => $grow || 0};
 
   & > option {
     background-color: var(--color-background-alt-solid);

diff --git a/components/edit/ErrorNotification.tsx b/components/edit/ErrorNotification.tsx
@@ -32,8 +32,8 @@ const ErrorBox = styled.div<
   color: white;
   text-align: center;
   padding: 1rem;
-  opacity: ${({$show}) => ($show ? "1" : "0")};
-  animation: ${({$show}) => ($show ? fadeIn : fadeOut)} 1s;
+  opacity: ${({ $show }) => ($show ? "1" : "0")};
+  animation: ${({ $show }) => ($show ? fadeIn : fadeOut)} 1s;
 `;
 
 const ErrorNotification = ({ message, show }: Props) => {