diff --git a/src/components/Card/CardFooter/index.tsx b/src/components/Card/CardFooter/index.tsx new file mode 100644 index 0000000..03f5675 --- /dev/null +++ b/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 = ({ + 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 ( +
+ {children} +
+ ); +}; +export default CardFooter; \ No newline at end of file diff --git a/src/components/Card/CardImage/index.tsx b/src/components/Card/CardImage/index.tsx new file mode 100644 index 0000000..3419fdf --- /dev/null +++ b/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 = ({ + className, + style, + cardImageUrl, + alt, + title, +}) => { + const generatedCardImageUrl = useBaseUrl(cardImageUrl); + return ( + {alt} + ); +}; +export default CardImage; \ No newline at end of file diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx new file mode 100644 index 0000000..6dc9343 --- /dev/null +++ b/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 = ({ + className, + style, + children, + shadow, +}) => { + const cardShadow = shadow ? `item shadow--${shadow}` : ''; + return ( +
+ {children} +
+ ); +}; +export default Card; \ No newline at end of file diff --git a/src/components/Columns/Column/index.tsx b/src/components/Columns/Column/index.tsx new file mode 100644 index 0000000..5213dd1 --- /dev/null +++ b/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 ( + +
+ {children} +
+ + ); +} \ No newline at end of file diff --git a/src/components/Columns/index.tsx b/src/components/Columns/index.tsx new file mode 100644 index 0000000..b1f5deb --- /dev/null +++ b/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 +
+
+ {children} +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/community.md b/src/pages/community.md index fc154ec..a0eca35 100644 --- a/src/pages/community.md +++ b/src/pages/community.md @@ -62,10 +62,58 @@ You can follow the work we plan to do using the [K3s Roadmap](https://github.com ## K3s Adopters -If you are adopter and want your logo to be shown here please open PR against: https://github.com/k3s-io/k3s/blob/master/ADOPTERS.md -[![Rocket Chat](https://cdn.prod.website-files.com/611a19b9853b7414a0f6b3f6/611bbb87319adfd903b90f24_logoRC.svg)](https://www.rocket.chat/)drawing[![Pits](https://www.pitsdatarecovery.com/wp-content/uploads/2024/08/PITS-logo_v2.svg)](https://www.pitsdatarecovery.com/) -drawingkairos logo + + + + + + Website + + + + + + + + Website + + + + + + + + Website + + + + +
+ + + + + + Website + + + + + + + + Website + + + + + + + + +
+If you are adopter and want your logo to be shown here please open PR against: https://github.com/k3s-io/k3s/blob/master/ADOPTERS.md --- diff --git a/src/theme/MDXComponents.tsx b/src/theme/MDXComponents.tsx new file mode 100644 index 0000000..6cfc44a --- /dev/null +++ b/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, + }; \ No newline at end of file