Add new FancyMiniContentCard components

TobiTRy · Dec 23, 2023 · b13eb1c · b13eb1c
1 parent 84da274
commit b13eb1c
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 12 deletions.
diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -65,11 +65,13 @@ export default function ExperimentalRoute() {
 
   return (
     <>
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        <FancyMiniContentCard size="sm" title="Test klkfkl dlfklkfdklfd " symbol={Icon} />
+        <FancyMiniContentCard size="md" title="Test kkdfk jkjkjkdf" symbol={Icon} />
+        <FancyMiniContentCard size="lg" title="Test kdlkdfklfdkl klkl" symbol={Icon} />
+      </div>
       <DesignWrapper>
         <DesignArea title="Test">
-          <FancyMiniContentCard size="sm" title="Test" symbol={Icon} />
-          <FancyMiniContentCard size="md" title="Test" symbol={Icon} />
-          <FancyMiniContentCard size="lg" title="Test" symbol={Icon} />
           <FancyCard>
             <FancyContent flexDirection="column" flexJustify="center">
               <FancyContent.Icon size="xl">

diff --git a/src/components/atoms/FancyCard/FancyCard.style.tsx b/src/components/atoms/FancyCard/FancyCard.style.tsx
@@ -14,9 +14,14 @@ type IStyledCard = IStyledPrefixAndOmiter<StyledCardProps>;
 //the main design of the card
 export const StyledCard = styled(FancyBox)<IStyledCard & { theme: TTheme }>`
   display: inline-block;
-  overflow: hidden;
   box-sizing: border-box;
+  aspect-ratio: 1/1;
   padding: ${({ $padding, $size = 'md', theme }) => ($padding ? theme.spacing[sizeSettings[$size].padding] : '')};
   border-radius: ${({ $roundedEdges }) => ($roundedEdges ? edgeCalculation($roundedEdges) : '')};
   ${({ $shadow }) => $shadow && boxShadow.sm};
 `;
+
+export const InnerCard = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/components/atoms/FancyCard/FancyCard.tsx b/src/components/atoms/FancyCard/FancyCard.tsx
@@ -1,4 +1,4 @@
-import { StyledCard } from './FancyCard.style';
+import { InnerCard, StyledCard } from './FancyCard.style';
 import { IFancyBox } from '@/components/atoms/FancyBox/';
 import { StyledCardProps } from '@/components/atoms/FancyCard/Card.model';
 
@@ -21,7 +21,7 @@ export default function FancyCard(props: ICard) {
 
   return (
     <StyledCard $size={size} $padding={padding} $roundedEdges={roundedEdges} $shadow={shadow} {...fancyBox}>
-      {children}
+      <InnerCard>{children}</InnerCard>
     </StyledCard>
   );
 }

diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx
@@ -1,12 +1,10 @@
 import { styled } from 'styled-components';
 
 import { FancyCard } from '@/components/atoms/FancyCard';
-import { sizeSettings } from './sizeSettings';
 import { TFancyMiniContentCardProps } from './FancyMiniContentCard';
 import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker';
 
 type IStyledCard = IStyledPrefixAndPicker<TFancyMiniContentCardProps, 'size'>;
 export const StyledCard = styled(FancyCard)<IStyledCard>`
   aspect-ratio: 1/1;
-  width: ${({ $size = 'md' }) => sizeSettings[$size].size};
 `;
diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
@@ -14,14 +14,14 @@ export type TFancyMiniContentCardProps = {
 };
 
 export default function FancyMiniContentCard(props: TFancyMiniContentCardProps) {
-  const { size } = props;
+  const { size, title, description } = props;
   return (
     <StyledCard $size={size}>
       <FancyFlexBox flexDirection="column" flexAlign="center" flexJustify="center" fitBox>
         <FancySVGAtom size="xl">{props.symbol}</FancySVGAtom>
 
-        <Typography type="h4">Moooiin</Typography>
-        <Typography type="content">Moooiin</Typography>
+        <Typography type="h4">{title}</Typography>
+        <Typography type="content">{description}</Typography>
       </FancyFlexBox>
     </StyledCard>
   );

diff --git a/src/components/templates/FancyMiniContentCard/sizeSettings.ts b/src/components/templates/FancyMiniContentCard/sizeSettings.ts
@@ -10,7 +10,7 @@ export const sizeSettings = {
     borderRadius: 'lg',
   },
   lg: {
-    size: globalSizes.lg.elementSize,
+    size: globalSizes.xxl.elementSize,
     padding: 'xl',
     borderRadius: 'xl',
   },