From 13c989c104ee3f83d684eab852cd439348d2192f Mon Sep 17 00:00:00 2001 From: N3v1 Date: Sat, 30 Nov 2024 21:56:34 +0100 Subject: [PATCH] (chore): Format code --- src/components/ui/badge.tsx | 165 ++++++++++++++----------- src/components/ui/scncard.tsx | 47 ++++--- src/pages/_meta.ts | 4 +- src/pages/contributing/codingstyle.mdx | 2 +- src/pages/contributing/index.mdx | 2 +- src/pages/contributing/visuals.mdx | 2 +- src/pages/index.mdx | 2 +- tailwind.config.ts | 10 +- 8 files changed, 127 insertions(+), 107 deletions(-) diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 613ac83..11a1261 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -6,11 +6,11 @@ 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', } /** @@ -18,89 +18,110 @@ export enum BadgeVariant { * 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 = ({ - 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( - - {children} - - ); + /** + * 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 ( + + {children} + + ); }; -export { Badge }; \ No newline at end of file +export { Badge }; diff --git a/src/components/ui/scncard.tsx b/src/components/ui/scncard.tsx index 59294b0..4fa02c6 100644 --- a/src/components/ui/scncard.tsx +++ b/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 = ({ - title, - description, - imageUrl, - buttonLabel, - buttonText, - buttonLink, + title, + description, + imageUrl, + buttonLabel, + buttonText, + buttonLink, }) => { - return ( -
- -
-
{title}
-

{description}

-
-
- ); + return ( +
+ +
+
{title}
+

{description}

+
+
+ ); }; -export default Card; \ No newline at end of file +export default Card; diff --git a/src/pages/_meta.ts b/src/pages/_meta.ts index cd723d1..21673ff 100644 --- a/src/pages/_meta.ts +++ b/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', diff --git a/src/pages/contributing/codingstyle.mdx b/src/pages/contributing/codingstyle.mdx index ff49267..b724c4d 100644 --- a/src/pages/contributing/codingstyle.mdx +++ b/src/pages/contributing/codingstyle.mdx @@ -14,4 +14,4 @@ import Feedback from '@/components/ui/feedback'; - \ No newline at end of file + diff --git a/src/pages/contributing/index.mdx b/src/pages/contributing/index.mdx index 03a1861..5414d80 100644 --- a/src/pages/contributing/index.mdx +++ b/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](). - \ No newline at end of file + diff --git a/src/pages/contributing/visuals.mdx b/src/pages/contributing/visuals.mdx index 135a18d..ed5dd8d 100644 --- a/src/pages/contributing/visuals.mdx +++ b/src/pages/contributing/visuals.mdx @@ -417,4 +417,4 @@ import BarchartExampleOne from '@/components/ui/barchart-example-one'; - \ No newline at end of file + diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 8f51da3..480bb2d 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -23,4 +23,4 @@ Welcome to the ScribbleLabApp Documentation! This resource is your go-to guide f className="" /> - \ No newline at end of file + diff --git a/tailwind.config.ts b/tailwind.config.ts index 5364eab..750a087 100644 --- a/tailwind.config.ts +++ b/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)',