feat: Implement page featured image

whitespace-se · Sep 13, 2023 · ee00077 · ee00077
1 parent f8c6206
commit ee00077
Showing 1 changed file with 17 additions and 28 deletions.
diff --git a/packages/gatsby-theme-wordpress-basic/src/wsui/components/PageFeaturedImage.jsx b/packages/gatsby-theme-wordpress-basic/src/wsui/components/PageFeaturedImage.jsx
@@ -1,30 +1,16 @@
 /** @jsx jsx */
-import { css, jsx } from "@emotion/react";
-import styled from "@emotion/styled";
+import { jsx } from "@emotion/react";
+import {
+  PageSection,
+  // useComponentWidth,
+} from "@wsui/base";
 
 import Image from "../../components/Image";
 import { usePageContext } from "../../hooks";
 
-const PageFeaturedImageRoot = styled.div`
-  margin-bottom: 3rem;
-  position: relative;
-  z-index: -1;
-  @media (max-width: 40rem) {
-    margin-bottom: -2.375rem;
-    &:after {
-      content: "";
-      display: block;
-      margin: 0 var(--spacing-sm);
-      background-color: white;
-      margin-top: -4.375rem;
-      height: 4.375rem;
-      position: relative;
-    }
-  }
-`;
-
 export default function PageFeaturedImage({ ...restProps }) {
   const pageContext = usePageContext();
+  // let [componentWidth, ref] = useComponentWidth(320);
 
   if (!pageContext?.displaySettings?.postSingleShowFeaturedImage) {
     return null;
@@ -35,21 +21,24 @@ export default function PageFeaturedImage({ ...restProps }) {
   if (!featuredImage) {
     return null;
   }
-  const { height, width } = featuredImage;
+  // const { height, width } = featuredImage;
 
   return (
-    <PageFeaturedImageRoot>
+    <PageSection
+      background={null}
+      spacing={0}
+      // ref={ref}
+    >
       <Image
         {...featuredImage}
         caption={null}
         credit={null}
-        width={width}
-        height={height}
-        maxWidth={636}
-        aspectRatio={width / height}
-        borderRadius={10}
+        // width={componentWidth}
+        // height={710}
+        aspectRatio={1440 / 710}
+        borderRadius={0}
         {...restProps}
       />
-    </PageFeaturedImageRoot>
+    </PageSection>
   );
 }