From a998e264c86d1459b6e43be3b8ae2db95b927c0d Mon Sep 17 00:00:00 2001
From: Caleb Denio <cjdenio44@gmail.com>
Date: Mon, 8 Jul 2024 13:39:53 -0400
Subject: [PATCH] Silence forwardRef warning in `Photo` component

---
 components/photo.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/photo.js b/components/photo.js
index c487c6d5..04215ea4 100644
--- a/components/photo.js
+++ b/components/photo.js
@@ -2,6 +2,7 @@ import styled from '@emotion/styled'
 import { Box, Card, Text, useColorMode } from 'theme-ui'
 import Image from 'next/image'
 import theme from '../lib/theme'
+import React from 'react'
 
 const Caption = styled(Text)`
   display: block;
@@ -16,7 +17,7 @@ const Caption = styled(Text)`
   z-index: 0;
 `
 
-const Photo = ({
+const Photo = React.forwardRef(function Photo({
   src,
   width,
   height,
@@ -24,14 +25,16 @@ const Photo = ({
   showAlt,
   dark,
   loading,
+  ref,
   ...props
-}) => {
+}) {
   const [colorMode] = useColorMode()
   const showCaption = showAlt && alt
   return (
     <Card
       {...props}
       as="figure"
+      ref={ref}
       sx={{
         p: [0, 0, 0],
         boxShadow: 'elevated',
@@ -62,6 +65,6 @@ const Photo = ({
       )}
     </Card>
   )
-}
+})
 
 export default Photo