fix banner

Nerimity · Sep 24, 2024 · 4f46bad · 4f46bad
1 parent f90765c
commit 4f46bad
Showing 1 changed file with 59 additions and 27 deletions.
diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx
@@ -3,43 +3,58 @@ import { FlexColumn } from "./Flexbox";
 import { styled } from "solid-styled-components";
 import { useWindowProperties } from "@/common/useWindowProperties";
 
-
-const BannerContainer = styled(FlexColumn)<{radius: number}>`
+const BannerContainer = styled(FlexColumn)<{ radius: number }>`
   display: flex;
-  position: relative;  
+  position: relative;
   aspect-ratio: 30/12;
   flex-shrink: 0;
-  border-radius: ${props => props.radius}px;
+  border-radius: ${(props) => props.radius}px;
   overflow: hidden;
+  width: 100%;
 `;
-  
-const BannerImage = styled("img")<{brightness?: number; radius: number}>`
+
+const BannerImage = styled("img")<{ brightness?: number; radius: number }>`
   position: absolute;
   inset: 0;
-  border-radius: ${props => props.radius}px;
-  filter: brightness(${props => props.brightness === undefined ? "70" : props.brightness }%);
+  border-radius: ${(props) => props.radius}px;
+  filter: brightness(
+    ${(props) => (props.brightness === undefined ? "70" : props.brightness)}%
+  );
   object-fit: cover;
   height: 100%;
   width: 100%;
 `;
 
-const SolidColor = styled("div")<{color: string; brightness?: number; radius: number}>`
+const SolidColor = styled("div")<{
+  color: string;
+  brightness?: number;
+  radius: number;
+}>`
   position: absolute;
   inset: 0;
-  border-radius: ${props => props.radius}px;
-  filter: brightness(${props => props.brightness === undefined ? "70" : props.brightness }%);
+  border-radius: ${(props) => props.radius}px;
+  filter: brightness(
+    ${(props) => (props.brightness === undefined ? "70" : props.brightness)}%
+  );
   object-fit: cover;
   height: 100%;
   width: 100%;
-  background: ${props => props.color};
+  background: ${(props) => props.color};
 `;
 
-
-export function Banner(props: {radius?: number; brightness?: number; class?: string; margin?: number; hexColor?: string, url?: string | null, maxHeight?: number; animate?: boolean; children?: JSXElement }) {
-
+export function Banner(props: {
+  radius?: number;
+  brightness?: number;
+  class?: string;
+  margin?: number;
+  hexColor?: string;
+  url?: string | null;
+  maxHeight?: number;
+  animate?: boolean;
+  children?: JSXElement;
+}) {
   const { hasFocus } = useWindowProperties();
 
-
   const url = () => {
     const url = props.url;
     if (!url) return;
@@ -52,34 +67,51 @@ export function Banner(props: {radius?: number; brightness?: number; class?: str
 
   const getStyles = () => {
     const styles: JSX.CSSProperties = {
-      flex: "1"
+      flex: "1",
     };
 
     if (props.maxHeight !== undefined) {
       styles["max-height"] = props.maxHeight + "px";
-    } 
-
+    }
 
     return styles;
   };
 
   const getOuterStyles = () => {
-
     return {
       padding: (props.margin === undefined ? 10 : props.margin) + "px",
       display: "flex",
       "flex-shrink": "0",
-      overflow: "hidden"
-    }
-  }
+      overflow: "hidden",
+    };
+  };
 
   return (
     <div style={getOuterStyles()}>
-      <BannerContainer radius={props.radius || 8} class={props.class}  style={getStyles()}>
-        <Show when={url()}><BannerImage class="banner-inner" radius={props.radius || 8} brightness={props.brightness} src={url()} alt="Banner"/></Show>
-        <Show when={!url()}><SolidColor class="banner-inner" radius={props.radius || 8} brightness={props.brightness} color={props.hexColor!} /></Show>
+      <BannerContainer
+        radius={props.radius || 8}
+        class={props.class}
+        style={getStyles()}
+      >
+        <Show when={url()}>
+          <BannerImage
+            class="banner-inner"
+            radius={props.radius || 8}
+            brightness={props.brightness}
+            src={url()}
+            alt="Banner"
+          />
+        </Show>
+        <Show when={!url()}>
+          <SolidColor
+            class="banner-inner"
+            radius={props.radius || 8}
+            brightness={props.brightness}
+            color={props.hexColor!}
+          />
+        </Show>
         {props.children}
       </BannerContainer>
     </div>
   );
-}
+}