Rename card component.

docusaurus.community.code-workspace

@@ -1,19 +1,19 @@
-{
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		"prettier.prettierPath": ".yarn/sdks/prettier",
-		"typescript.tsdk": ".yarn/sdks/typescript/lib",
-		"typescript.enablePromptUseWorkspaceTsdk": true,
-		"cSpell.words": [
-			"deflist",
-			"iconify",
-			"katex",
-			"rehype"
-		],
-		"discord.enabled": true
-	}
-}
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"prettier.prettierPath": ".yarn/sdks/prettier",
+		"typescript.tsdk": ".yarn/sdks/typescript/lib",
+		"typescript.enablePromptUseWorkspaceTsdk": true,
+		"cSpell.words": [
+			"deflist",
+			"iconify",
+			"katex",
+			"rehype"
+		],
+		"discord.enabled": true
+	}
+}

package.json

@@ -80,7 +80,7 @@
   "engines": {
     "node": ">=18.14"
   },
-  "packageManager": "yarn@4.2.2+sha512.c44e283c54e02de9d1da8687025b030078c1b9648d2895a65aab8e64225bfb7becba87e1809fc0b4b6778bbd47a1e2ab6ac647de4c5e383a53a7c17db6c3ff4b",
+  "packageManager": "yarn@4.4.0",
   "dependenciesMeta": {
     "@docusaurus/tsconfig": {
       "unplugged": true

src/components/SimpleCard/CardBody/index.tsx → src/components/Card/CardBody/index.tsx

@@ -1,63 +1,63 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import clsx from 'clsx';
-
-interface CardBodyProps {
-  className?: string;
-  style?: CSSProperties;
-  children: ReactNode;
-  textAlign?: string;
-  variant?: string;
-  italic?: boolean;
-  noDecoration?: boolean;
-  transform?: string;
-  breakWord?: boolean;
-  truncate?: boolean;
-  weight?: string;
-}
-
-const CardBody: React.FC<CardBodyProps> = ({
-  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__body',
-        className,
-        text,
-        textType,
-        textColor,
-        textItalic,
-        textDecoration,
-        textBreak,
-        textTruncate,
-        textWeight
-      )}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default CardBody;
-
-
+import React, { CSSProperties, ReactNode } from 'react';
+import clsx from 'clsx';
+
+interface CardBodyProps {
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+  textAlign?: string;
+  variant?: string;
+  italic?: boolean;
+  noDecoration?: boolean;
+  transform?: string;
+  breakWord?: boolean;
+  truncate?: boolean;
+  weight?: string;
+}
+
+const CardBody: React.FC<CardBodyProps> = ({
+  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__body',
+        className,
+        text,
+        textType,
+        textColor,
+        textItalic,
+        textDecoration,
+        textBreak,
+        textTruncate,
+        textWeight
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardBody;
+
+

src/components/SimpleCard/CardFooter/index.tsx → src/components/Card/CardFooter/index.tsx

@@ -1,64 +1,64 @@
-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;
-
-
-
+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/CardHeader/index.tsx

@@ -0,0 +1,32 @@
+import React,  { CSSProperties } from 'react';
+import clsx from 'clsx';
+
+const CardHeader = ({
+  className, // Custom CSS classes for the component
+  style, // Custom CSS styles for the component
+  children, // The content of the component
+  textAlign, // Text alignment
+  variant, // Text color variant
+  italic = false, // Italic text
+  noDecoration = false, // No text decoration 
+  transform, // Text transformation
+  breakWord = false, // Break word
+  truncate = false, // Truncate text
+  weight, // Text 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__header', className, text, textType, textColor, textItalic, textDecoration, textBreak, textTruncate, textWeight)} style={style} >
+      {children}
+    </div>
+  );
+}
+
+export default CardHeader;

src/components/SimpleCard/CardImage/index.tsx → src/components/Card/CardImage/index.tsx

@@ -1,29 +1,29 @@
-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;
+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;