Add TestCard component

TobiTRy · Dec 24, 2023 · 06dbd91 · 06dbd91
1 parent 2f92924
commit 06dbd91
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 15 deletions.
diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -21,6 +21,7 @@ import { FancyCard } from '@/components/atoms/FancyCard';
 import { FancyBox } from '@/components/atoms/FancyBox';
 import { SVGCheckMark } from '@/components/icons/SVGCheckMark';
 import FancyMiniContentCard from '@/components/templates/FancyMiniContentCard/FancyMiniContentCard';
+import Card from '@/components/templates/TestCard/TestCard';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -65,10 +66,17 @@ export default function ExperimentalRoute() {
 
   return (
     <>
+      <Card />
       <div style={{ display: 'flex', gap: '12px' }}>
-        <FancyMiniContentCard size="md" title="Test klkfkl dlfklkfdklfd " symbol={Icon} />
-        <FancyMiniContentCard size="md" title="Test kkdfk jkjkjkdf" symbol={Icon} />
-        <FancyMiniContentCard size="md" title="Test kdlkdfklfdkl klkl" symbol={Icon} />
+        <FancyMiniContentCard
+          themeType="accent"
+          size="md"
+          title="Test klkfkl dlfklkfdklfd "
+          description="mooiiinn"
+          symbol={Icon}
+        />
+        <FancyMiniContentCard size="md" title="Test kkdfk jkjkjkdf" description="dsdssdsd" symbol={Icon} />
+        <FancyMiniContentCard size="md" title="Test kdlkdfklfdkl klkl" description="kkdssdds" symbol={Icon} />
       </div>
       <DesignWrapper>
         <DesignArea title="Test">

diff --git a/src/components/atoms/FancyCard/FancyCard.tsx b/src/components/atoms/FancyCard/FancyCard.tsx
@@ -5,28 +5,36 @@ import { StyledCardProps } from '@/components/atoms/FancyCard/Card.model';
 // --------------------------------------------------------------------------- //
 // ---------- The card is there to wrapp some content or components ---------- //
 // --------------------------------------------------------------------------- //
-type ICard = StyledCardProps & IFancyBox;
-export default function FancyCard(props: ICard) {
+export type IFancyCard = StyledCardProps & IFancyBox;
+export default function FancyCard(props: IFancyCard) {
   const {
     children,
     size,
     padding = true,
     roundedEdges,
     shadow,
+    layer = 0,
     ...fancyBox
   } = {
     ...defaultProps,
     ...props,
   };
 
   return (
-    <StyledCard $size={size} $padding={padding} $roundedEdges={roundedEdges} $shadow={shadow} {...fancyBox}>
+    <StyledCard
+      $size={size}
+      $layer={layer}
+      $padding={padding}
+      $roundedEdges={roundedEdges}
+      $shadow={shadow}
+      {...fancyBox}
+    >
       <InnerCard>{children}</InnerCard>
     </StyledCard>
   );
 }
 
-const defaultProps: ICard = {
+const defaultProps: IFancyCard = {
   padding: true,
   shadow: true,
   roundedEdges: ['xl'],

diff --git a/src/components/atoms/FancyCard/sizeSettings.ts b/src/components/atoms/FancyCard/sizeSettings.ts
@@ -7,7 +7,7 @@ export const sizeSettings = {
     borderRadius: 'sm' as TBorderRadiusSizes,
   },
   md: {
-    padding: 'sm' as TSpacings,
+    padding: 'xl' as TSpacings,
     borderRadius: 'sm' as TBorderRadiusSizes,
   },
   lg: {

diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.style.tsx
@@ -7,4 +7,5 @@ import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker';
 type IStyledCard = IStyledPrefixAndPicker<TFancyMiniContentCardProps, 'size'>;
 export const StyledCard = styled(FancyCard)<IStyledCard>`
   flex: 1;
+  text-align: center;
 `;
diff --git a/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx b/src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
@@ -5,23 +5,25 @@ import { Typography } from '@/components/atoms/Typography';
 import { FancySVGAtom } from '@/components/atoms/FancySVGAtom';
 import { TComponentSizes } from '@/interface/TComponentSizes';
 import { StyledCard } from './FancyMiniContentCard.style';
+import { IFancyCard } from '@/components/atoms/FancyCard/FancyCard';
 
 export type TFancyMiniContentCardProps = {
   symbol?: React.ReactNode;
   title: string;
   description?: string;
   size?: TComponentSizes;
-};
+} & IFancyCard;
 
 export default function FancyMiniContentCard(props: TFancyMiniContentCardProps) {
-  const { size, title, description } = props;
+  const { size, title, description, ...cardProps } = props;
   return (
-    <StyledCard $size={size}>
+    <StyledCard $size={size} {...cardProps}>
       <FancyFlexBox flexDirection="column" flexAlign="center" flexJustify="center" fitBox>
-        <FancySVGAtom size="xl">{props.symbol}</FancySVGAtom>
-
-        <Typography type="h4">{title}</Typography>
-        <Typography type="content">{description}</Typography>
+        <FancySVGAtom size="full">{props.symbol}</FancySVGAtom>
+        <div>
+          <Typography type="h4">{title}</Typography>
+          <Typography type="content">{description}</Typography>
+        </div>
       </FancyFlexBox>
     </StyledCard>
   );

diff --git a/src/components/templates/TestCard/TestCard.tsx b/src/components/templates/TestCard/TestCard.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+  border-radius: 1.5rem; /* equivalent to 3xl in Tailwind */
+  color: white;
+`;
+
+const ContentArea = styled.div`
+  padding: 2rem 1.5rem; /* Adjust padding for mobile and larger screens */
+  text-align: left;
+`;
+
+const Title = styled.h2`
+  font-size: 1.125rem; /* equivalent to lg in Tailwind */
+  font-weight: 500; /* medium */
+  letter-spacing: tighter;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+
+  @media (min-width: 1024px) {
+    font-size: 1.875rem; /* equivalent to 3xl in Tailwind */
+  }
+`;
+
+const Description = styled.p`
+  font-size: 0.875rem; /* equivalent to sm in Tailwind */
+  color: #f5f5f5; /* gray-100 in Tailwind */
+  margin-top: 0.5rem;
+`;
+
+const PricingArea = styled.div`
+  margin-top: 1.5rem;
+  font-size: 3.125rem; /* equivalent to 5xl in Tailwind */
+  font-weight: 300; /* light */
+`;
+
+const Price = styled.span``;
+
+const Frequency = styled.span`
+  font-size: 1rem; /* base font size */
+  font-weight: 500; /* medium */
+`;
+
+const CTAButton = styled.a`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.625rem 1.5rem;
+  text-align: center;
+  background-color: white;
+  color: black;
+  border: 2px solid white;
+  border-radius: 9999px; /* full rounded */
+  text-decoration: none;
+  font-size: 0.875rem;
+  margin: 1.5rem 1.5rem 0;
+  transition:
+    background-color 200ms,
+    border-color 200ms,
+    color 200ms;
+
+  &:hover {
+    background-color: transparent;
+    border-color: white;
+    color: white;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+`;
+
+const Card: React.FC = () => {
+  return (
+    <CardContainer>
+      <ContentArea>
+        <div>
+          <Title>Corporate</Title>
+          <Description>Grow steadily and pizza.</Description>
+        </div>
+        <PricingArea>
+          <Price>$35</Price>
+          <Frequency> /mo</Frequency>
+        </PricingArea>
+      </ContentArea>
+      <CTAButton href="#" aria-describedby="tier-starter">
+        Get started
+      </CTAButton>
+    </CardContainer>
+  );
+};
+
+export default Card;