Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine AS builder
+FROM node:18-alpine AS builder
 
 RUN apk add --no-cache yarn
 
@@ -13,14 +13,14 @@ COPY ./src/app/favicon.ico ./public/favicon.ico
 
 RUN yarn build
 
-FROM node:20-alpine AS runner
+FROM node:18-alpine AS runner
 
 WORKDIR /app
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-ENV NODE_ENV=production
+ENV NODE_ENV production
 
 USER nextjs
 

src/components/wobbling-image.tsx

@@ -13,26 +13,6 @@ interface WobblingImageInterface {
   }
 }
 
-interface ImageClipInterface {
-  name: string;
-  src: string;
-  size: number;
-  visible?: boolean;
-}
-
-const ImageClip: React.FC<ImageClipInterface> = ({
-  name, src, size, visible
-}) => (
-  <Image
-    className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", visible ? "opacity-100" : "opacity-0")}
-    alt={name}
-    src={src}
-    width={size}
-    height={size}
-    draggable={false}
-  />
-)
-
 function WobblingImage ({
   images
 }: WobblingImageInterface) {
@@ -148,23 +128,21 @@ function WobblingImage ({
         onMouseDown={(e) => e.preventDefault()}
         onPointerDown={(e) => e.preventDefault()}
       >
-        <ImageClip
-          name="idle"
-          src={images.idle}
-          size={size}
-          visible={!isPoked && !isAware}
+        <Image
+          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-0" : "opacity-100")}
+          alt="clip1"
+          src={isAware ? (images.aware || images.idle) : images.idle}
+          width={size}
+          height={size}
+          draggable={false}
         />
-        <ImageClip
-          name="aware"
-          src={images.aware || images.idle}
-          size={size}
-          visible={!isPoked && isAware}
-        />
-        <ImageClip
-          name="poked"
+        <Image
+          className={clsx("absolute left-1/2 -translate-x-1/2 top-0 pointer-events-none", isPoked ? "opacity-100" : "opacity-0")}
+          alt="clip2"
           src={images.poked || images.idle}
-          size={size}
-          visible={isPoked}
+          width={size}
+          height={size}
+          draggable={false}
         />
       </div>
     </div>