Add column and card components

Signed-off-by: Derek Nola <[email protected]>

Author: dereknola

src/components/Card/CardFooter/index.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx';
+interface CardFooterProps {
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+  textAlign?: string;
+  variant?: string;
+  italic?: boolean;
+  noDecoration?: boolean;
+  transform?: string;
+  breakWord?: boolean;
+  truncate?: boolean;
+  weight?: string;
+}
+const CardFooter: React.FC<CardFooterProps> = ({
+  className,
+  style,
+  children,
+  textAlign,
+  variant,
+  italic = false,
+  noDecoration = false,
+  transform,
+  breakWord = false,
+  truncate = false,
+  weight,
+}) => {
+  const text = textAlign ? `text--${textAlign}` : '';
+  const textColor = variant ? `text--${variant}` : '';
+  const textItalic = italic ? 'text--italic' : '';
+  const textDecoration = noDecoration ? 'text-no-decoration' : '';
+  const textType = transform ? `text--${transform}` : '';
+  const textBreak = breakWord ? 'text--break' : '';
+  const textTruncate = truncate ? 'text--truncate' : '';
+  const textWeight = weight ? `text--${weight}` : '';
+  return (
+    <div
+      className={clsx(
+        'card__footer',
+        className,
+        text,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+export default CardFooter;

src/components/Card/CardImage/index.tsx

@@ -0,0 +1,27 @@
+import React, { CSSProperties } from 'react';
+import clsx from 'clsx';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+interface CardImageProps {
+  className?: string;
+  style?: CSSProperties;
+  cardImageUrl: string;
+  alt: string;
+  title: string;
+}
+const CardImage: React.FC<CardImageProps> = ({
+  className,
+  style,
+  cardImageUrl,
+  alt,
+  title,
+}) => {
+  const generatedCardImageUrl = useBaseUrl(cardImageUrl);
+  return (
+    <img
+      className={clsx('card__image', className)}
+      style={style}
+      src={generatedCardImageUrl} alt={alt} title={title}
+    />
+  );
+};
+export default CardImage;

src/components/Card/index.tsx

@@ -0,0 +1,24 @@
+import React, { CSSProperties, ReactNode } from 'react'; // Import types for props
+import clsx from 'clsx'; // clsx helps manage conditional className names in a clean and concise manner.
+// Define an interface for the component props
+interface CardProps {
+  className?: string; // Custom classes for the container card
+  style?: CSSProperties; // Custom styles for the container card
+  children: ReactNode; // Content to be included within the card
+  shadow?: 'lw' | 'md' | 'tl'; // Used to add shadow under your card Shadow levels: low (lw), medium (md), top-level (tl)
+}
+// Build the card component with the specified props
+const Card: React.FC<CardProps> = ({
+  className,
+  style,
+  children,
+  shadow,
+}) => {
+  const cardShadow = shadow ? `item shadow--${shadow}` : '';
+  return (
+    <div className={clsx('card', className, cardShadow)} style={style}>
+      {children}
+    </div>
+  );
+};
+export default Card;

src/components/Columns/Column/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+
+// Define the Column component as a function 
+// with children, className, style as properties
+// Look https://infima.dev/docs/ for learn more
+// Style only affects the element inside the column, but we could have also made the same distinction as for the classes.
+export default function Column({ children , className, style  }) {
+  return (
+  
+      <div className={clsx('col' , className)} style={style}>
+        {children}
+      </div>
+  
+  );
+}

src/components/Columns/index.tsx

@@ -0,0 +1,22 @@
+import React, { ReactNode, CSSProperties } from 'react';
+// Import clsx library for conditional classes.
+import clsx from 'clsx'; 
+interface ColumnsProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+// Define the Columns component as a function 
+// with children, className, and style as properties
+// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
+// Style" will allow you to either pass your custom styles directly, which can be an alternative to the "styles.module.css" file in certain cases.
+export default function Columns({ children, className, style }: ColumnsProps) {
+  return (
+  // This section encompasses the columns that we will integrate with children from a dedicated component to allow the addition of columns as needed 
+    <div className="container center">
+      <div className={clsx('row', className)} style={style}>
+        {children}    
+      </div>
+    </div>
+  );
+}

src/theme/MDXComponents.tsx

@@ -0,0 +1,17 @@
+  import React from 'react';
+  // Importing the original mapper + our components according to the Docusaurus doc
+  import MDXComponents from '@theme-original/MDXComponents';
+  import Card from '../components/Card';
+  import CardFooter from '../components/Card/CardFooter';
+  import CardImage from '../components/Card/CardImage';
+  import Columns from '../components/Columns';
+  import Column from '../components/Columns/Column';
+  export default {
+    // Reusing the default mapping
+    ...MDXComponents,
+    Card, 
+    CardFooter,
+    CardImage,
+    Columns,
+    Column,
+  };