fix(card): removed banner component and combined the feature in the c…

…ard component

src/components/Card.tsx

@@ -3,35 +3,53 @@ import styled from 'styled-components';
 import colors from '../styles/colors';
 
 interface CardProps {
-  withGradientWrapper?: boolean;
+	withBorderGradient?: boolean;
+	withBackgroundGradientColor?: keyof typeof colors;
 }
 
 export default function Card({
-  withGradientWrapper,
-  children,
+	withBorderGradient,
+	withBackgroundGradientColor,
+	children,
 }: PropsWithChildren<CardProps>) {
-  if (withGradientWrapper) {
-    return (
-      <StyledGradientWrapper>
-        <StyledCard>{children}</StyledCard>
-      </StyledGradientWrapper>
-    );
-  }
-  return <StyledCard>{children}</StyledCard>;
+	if (withBorderGradient) {
+		return (
+			<StyledGradientWrapper>
+				<StyledCard>{children}</StyledCard>
+			</StyledGradientWrapper>
+		);
+	}
+	if (withBackgroundGradientColor) {
+		return (
+			<StyledBackgroundGradientWrapper color={withBackgroundGradientColor}>
+				<StyledCard className="darker-40">{children}</StyledCard>
+			</StyledBackgroundGradientWrapper>
+		);
+	}
+	return <StyledCard>{children}</StyledCard>;
 }
 
 const StyledGradientWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  border-radius: 5px;
-  background: ${colors.gradients.rainbow};
-  padding: 2px;
-  border-radius: 4px;
+	width: 100%;
+	height: 100%;
+	border-radius: 5px;
+	background: ${colors.gradients.rainbow};
+	padding: 2px;
+	border-radius: 4px;
+`;
+
+const StyledBackgroundGradientWrapper = styled.div<{ color: keyof typeof colors }>`
+	width: 100%;
+	height: 100%;
+	border-radius: 5px;
+	background: ${({ color }) => colors[color]};
+	padding: 2px;
+	border-radius: 4px;
 `;
 
 const StyledCard = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: ${colors.backgroundColor};
-  border-radius: 4px;
+	width: 100%;
+	height: 100%;
+	background-color: ${colors.backgroundColor};
+	border-radius: 4px;
 `;

src/components/index.ts

@@ -8,4 +8,3 @@ export { default as Selector } from './Selector';
 export { default as Dropdown } from './Dropdown';
 export { default as Card } from './Card';
 export { default as Carousel } from './Carousel';
-export { default as Banner } from './Banner';