(chore): Format code

src/components/ui/badge.tsx

@@ -6,101 +6,122 @@ import { ReactNode } from 'react';
  * The variants control the badge's appearance and color.
  */
 export enum BadgeVariant {
-    default = "default",
-    error = "error",
-    success = "success",
-    warning = "warning",
-    reference = "reference",
+  default = 'default',
+  error = 'error',
+  success = 'success',
+  warning = 'warning',
+  reference = 'reference',
 }
 
 /**
  * Props interface for the Badge component.
  * Defines the expected properties that can be passed into the component.
  */
 interface BadgeProps {
+  /**
+   * The content to be displayed inside the badge.
+   * It can be text, icons, or other React components.
+   */
+  children: ReactNode;
 
-    /** 
-     * The content to be displayed inside the badge. 
-     * It can be text, icons, or other React components.
-     */
-    children: ReactNode;
+  /**
+   * Defines the style variant for the badge.
+   * Controls the background and text color (default: 'default').
+   */
+  variant?: BadgeVariant;
 
-    /** 
-     * Defines the style variant for the badge. 
-     * Controls the background and text color (default: 'default').
-     */
-    variant?: BadgeVariant;
+  /**
+   * Custom background color for the badge.
+   * Can be a Tailwind CSS color class or custom class.
+   */
+  background?: string;
 
-    /** 
-     * Custom background color for the badge. 
-     * Can be a Tailwind CSS color class or custom class.
-     */
-    background?: string;
+  /**
+   * Custom text color for the badge.
+   * Can be a Tailwind CSS color class or custom class.
+   */
+  textColor?: string;
 
-    /** 
-     * Custom text color for the badge. 
-     * Can be a Tailwind CSS color class or custom class.
-     */
-    textColor?: string;
-
-    /** 
-     * Additional custom CSS classes to apply to the badge element.
-     * This is useful for applying further customization beyond the predefined styles.
-     */
-    className?: string;
+  /**
+   * Additional custom CSS classes to apply to the badge element.
+   * This is useful for applying further customization beyond the predefined styles.
+   */
+  className?: string;
 }
 
 /**
  * Badge component that renders a styled badge with text or other content.
  * The badge's appearance is controlled via variants, background, and text color.
- * 
+ *
  * @param {BadgeProps} props - The props for the Badge component.
  * @returns {JSX.Element} The rendered Badge component.
  */
 const Badge: React.FC<BadgeProps> = ({
-    children,
-    variant = BadgeVariant.default,
-    background = 'bg-gray-200',
-    textColor = 'text-gray-800',
-    className = '',
+  children,
+  variant = BadgeVariant.default,
+  background = 'bg-gray-200',
+  textColor = 'text-gray-800',
+  className = '',
 }) => {
+  /**
+   * A mapping of badge variants to their corresponding background and text color styles.
+   * This is used to determine the appearance of the badge based on the `variant` prop.
+   */
+  const variantStyles: Record<
+    BadgeVariant,
+    { background: string; textColor: string }
+  > = {
+    [BadgeVariant.default]: {
+      background: 'bg-shark-800',
+      textColor: 'text-shark-400',
+    },
+    [BadgeVariant.error]: {
+      background: 'bg-tamarind-800',
+      textColor: 'text-tamarind-400',
+    },
+    [BadgeVariant.success]: {
+      background: 'bg-bush-800',
+      textColor: 'text-bush-400',
+    },
+    [BadgeVariant.warning]: {
+      background: 'bg-clinker-800',
+      textColor: 'text-clinker-400',
+    },
+    [BadgeVariant.reference]: {
+      background: 'bg-deep-teal-800',
+      textColor: 'text-deep-teal-400',
+    },
+  };
 
-    /**
-     * A mapping of badge variants to their corresponding background and text color styles.
-     * This is used to determine the appearance of the badge based on the `variant` prop.
-     */
-    const variantStyles: Record<
-        BadgeVariant,
-        { background: string; textColor: string }
-    > = {
-        [BadgeVariant.default]: { background: 'bg-shark-800', textColor: 'text-shark-400' },
-        [BadgeVariant.error]: { background: 'bg-tamarind-800', textColor: 'text-tamarind-400' },
-        [BadgeVariant.success]: { background: 'bg-bush-800', textColor: 'text-bush-400' },
-        [BadgeVariant.warning]: { background: 'bg-clinker-800', textColor: 'text-clinker-400' },
-        [BadgeVariant.reference]: { background: 'bg-deep-teal-800', textColor: 'text-deep-teal-400' },
-    };
-
-    /**
-     * Determine the resolved background color for the badge.
-     * If a custom background is provided, it overrides the default variant background.
-     */
-    const resolvedBackground = background !== 'bg-gray-200' ? background : variantStyles[variant].background;
+  /**
+   * Determine the resolved background color for the badge.
+   * If a custom background is provided, it overrides the default variant background.
+   */
+  const resolvedBackground =
+    background !== 'bg-gray-200'
+      ? background
+      : variantStyles[variant].background;
 
-    /**
-     * Determine the resolved text color for the badge.
-     * If a custom text color is provided, it overrides the default variant text color.
-     */
-    const resolvedTextColor = textColor !== 'text-gray-800' ? textColor : variantStyles[variant].textColor;
+  /**
+   * Determine the resolved text color for the badge.
+   * If a custom text color is provided, it overrides the default variant text color.
+   */
+  const resolvedTextColor =
+    textColor !== 'text-gray-800'
+      ? textColor
+      : variantStyles[variant].textColor;
 
-    /**
-     * Renders the badge as a span element with dynamic classes for styling.
-     * The classes include padding, rounded corners, font size, and the background and text colors determined above.
-     */
-    return(
-        <span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${resolvedBackground} ${resolvedTextColor} ${className}`}>
-            {children}
-        </span>
-    );
+  /**
+   * Renders the badge as a span element with dynamic classes for styling.
+   * The classes include padding, rounded corners, font size, and the background and text colors determined above.
+   */
+  return (
+    <span
+      className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${resolvedBackground} ${resolvedTextColor} ${className}`}
+    >
+      {children}
+    </span>
+  );
 };
 
-export { Badge };
+export { Badge };

src/components/ui/scncard.tsx

@@ -13,19 +13,18 @@ import Cimg from './cimg';
  * - buttonLink: The URL the button should link to when clicked.
  */
 interface CardProps {
-    title: string;
-    description: string;
-    imageUrl: string;
-    buttonLabel: string;
-    buttonText: string;
-    buttonLink: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  buttonLabel: string;
+  buttonText: string;
+  buttonLink: string;
 }
 
-
 /**
  * Card component displays a card with an image, title, description, and a button.
  * The component is designed to be responsive and adaptable to different screen sizes.
- * 
+ *
  * @param {string} title - The title displayed on the card.
  * @param {string} description - A short text describing the content of the card.
  * @param {string} imageUrl - The URL of the image to display on top of the card.
@@ -34,22 +33,22 @@ interface CardProps {
  * @param {string} buttonLink - The URL the button will link to.
  */
 const Card: React.FC<CardProps> = ({
-    title,
-    description,
-    imageUrl,
-    buttonLabel,
-    buttonText,
-    buttonLink,
+  title,
+  description,
+  imageUrl,
+  buttonLabel,
+  buttonText,
+  buttonLink,
 }) => {
-    return (
-        <div className="border border-neutral-400 dark:border-neutral-800 rounded-lg shadow-lg overflow-hidden max-w-xs w-full">
-            <Cimg id={imageUrl} alt={title} className='w-full h-48 object-cover' />
-            <div className="p-6">
-                <div className="font-semibold text-xl text-white mb-3">{title}</div>
-                <p className="text-neutral-400 text-base mb-5">{description}</p>
-            </div>
-        </div>
-    );
+  return (
+    <div className="border border-neutral-400 dark:border-neutral-800 rounded-lg shadow-lg overflow-hidden max-w-xs w-full">
+      <Cimg id={imageUrl} alt={title} className="w-full h-48 object-cover" />
+      <div className="p-6">
+        <div className="font-semibold text-xl text-white mb-3">{title}</div>
+        <p className="text-neutral-400 text-base mb-5">{description}</p>
+      </div>
+    </div>
+  );
 };
 
-export default Card;
+export default Card;

src/pages/_meta.ts

@@ -1,5 +1,5 @@
-import { link } from "fs";
-import { FaExternalLinkAlt } from "react-icons/fa";
+import { link } from 'fs';
+import { FaExternalLinkAlt } from 'react-icons/fa';
 
 export default {
   index: 'Introduction',

src/pages/contributing/codingstyle.mdx

@@ -14,4 +14,4 @@ import Feedback from '@/components/ui/feedback';
 
 </Callout>
 
-<Feedback />
+<Feedback />

src/pages/contributing/index.mdx

@@ -128,4 +128,4 @@ We use [Nextra](https://nextra.vercel.app/) and [Next.js](https://nextjs.org/) f
 
 For more detailed instructions, refer to our [documentation guide]().
 
-<Feedback />
+<Feedback />

src/pages/contributing/visuals.mdx

@@ -417,4 +417,4 @@ import BarchartExampleOne from '@/components/ui/barchart-example-one';
 
 <BarchartExampleOne />
 
-<Feedback />
+<Feedback />

src/pages/index.mdx

@@ -23,4 +23,4 @@ Welcome to the ScribbleLabApp Documentation! This resource is your go-to guide f
   className=""
 />
 
-<Feedback />
+<Feedback />

tailwind.config.ts

@@ -63,7 +63,7 @@ export default {
           900: 'var(--deep-teal-900)',
           950: 'var(--deep-teal-950)',
         },
-        'tamarind': {
+        tamarind: {
           50: 'var(--tamarind-50)',
           100: 'var(--tamarind-100)',
           200: 'var(--tamarind-200)',
@@ -76,7 +76,7 @@ export default {
           900: 'var(--tamarind-900)',
           950: 'var(--tamarind-950)',
         },
-        'shark': {
+        shark: {
           50: 'var(--shark-50)',
           100: 'var(--shark-100)',
           200: 'var(--shark-200)',
@@ -89,7 +89,7 @@ export default {
           900: 'var(--shark-900)',
           950: 'var(--shark-950)',
         },
-        'clinker': {
+        clinker: {
           50: 'var(--clinker-50)',
           100: 'var(--clinker-100)',
           200: 'var(--clinker-200)',
@@ -102,7 +102,7 @@ export default {
           900: 'var(--clinker-900)',
           950: 'var(--clinker-950)',
         },
-        'bush': {
+        bush: {
           50: 'var(--bush-50)',
           100: 'var(--bush-100)',
           200: 'var(--bush-200)',
@@ -115,7 +115,7 @@ export default {
           900: 'var(--bush-900)',
           950: 'var(--bush-950)',
         },
-        'revolver': {
+        revolver: {
           50: 'var(--revolver-50)',
           100: 'var(--revolver-100)',
           200: 'var(--revolver-200)',