Merge pull request #97 from prgrms-fe-devcourse/72-feature/banner-com…

…ponent 72 feature/banner component
prgrms-fe-devcourse · Oct 1, 2024 · 58e4ca2 · 58e4ca2
2 parents 00cb2af + 9a796c4
commit 58e4ca2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/src/assets/imgs/banner.png b/src/assets/imgs/banner.png
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
@@ -0,0 +1,15 @@
+import * as S from './styles';
+
+interface BannerProps {
+  src: string;
+  width?: number;
+  height?: number;
+}
+
+export const Banner = ({ src, width = 100, height = 30 }: BannerProps) => {
+  return (
+    <S.Banner width={width} height={height}>
+      <img src={src} alt="banner"></img>
+    </S.Banner>
+  );
+};
diff --git a/src/components/Banner/styles.ts b/src/components/Banner/styles.ts
@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+
+export const Banner = styled.div<{ width: number; height: number }>`
+  position: relative;
+  width: ${({ width }) => width}%;
+  padding-top: ${({ height }) => height}%;
+  max-width: 1280px;
+  margin: auto;
+
+  & > img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (min-width: 1280px) {
+    padding-top: 300px;
+  }
+`;