Skip to content

Commit 13c989c

Browse files
N3v1N3v1
committed
(chore): Format code
1 parent 61a8c10 commit 13c989c

File tree

8 files changed

+127
-107
lines changed

8 files changed

+127
-107
lines changed

‎src/components/ui/badge.tsx

+93-72
Original file line numberDiff line numberDiff line change
@@ -6,101 +6,122 @@ import { ReactNode } from 'react';
66
* The variants control the badge's appearance and color.
77
*/
88
export enum BadgeVariant {
9-
default = "default",
10-
error = "error",
11-
success = "success",
12-
warning = "warning",
13-
reference = "reference",
9+
default = 'default',
10+
error = 'error',
11+
success = 'success',
12+
warning = 'warning',
13+
reference = 'reference',
1414
}
1515

1616
/**
1717
* Props interface for the Badge component.
1818
* Defines the expected properties that can be passed into the component.
1919
*/
2020
interface BadgeProps {
21+
/**
22+
* The content to be displayed inside the badge.
23+
* It can be text, icons, or other React components.
24+
*/
25+
children: ReactNode;
2126

22-
/**
23-
* The content to be displayed inside the badge.
24-
* It can be text, icons, or other React components.
25-
*/
26-
children: ReactNode;
27+
/**
28+
* Defines the style variant for the badge.
29+
* Controls the background and text color (default: 'default').
30+
*/
31+
variant?: BadgeVariant;
2732

28-
/**
29-
* Defines the style variant for the badge.
30-
* Controls the background and text color (default: 'default').
31-
*/
32-
variant?: BadgeVariant;
33+
/**
34+
* Custom background color for the badge.
35+
* Can be a Tailwind CSS color class or custom class.
36+
*/
37+
background?: string;
3338

34-
/**
35-
* Custom background color for the badge.
36-
* Can be a Tailwind CSS color class or custom class.
37-
*/
38-
background?: string;
39+
/**
40+
* Custom text color for the badge.
41+
* Can be a Tailwind CSS color class or custom class.
42+
*/
43+
textColor?: string;
3944

40-
/**
41-
* Custom text color for the badge.
42-
* Can be a Tailwind CSS color class or custom class.
43-
*/
44-
textColor?: string;
45-
46-
/**
47-
* Additional custom CSS classes to apply to the badge element.
48-
* This is useful for applying further customization beyond the predefined styles.
49-
*/
50-
className?: string;
45+
/**
46+
* Additional custom CSS classes to apply to the badge element.
47+
* This is useful for applying further customization beyond the predefined styles.
48+
*/
49+
className?: string;
5150
}
5251

5352
/**
5453
* Badge component that renders a styled badge with text or other content.
5554
* The badge's appearance is controlled via variants, background, and text color.
56-
*
55+
*
5756
* @param {BadgeProps} props - The props for the Badge component.
5857
* @returns {JSX.Element} The rendered Badge component.
5958
*/
6059
const Badge: React.FC<BadgeProps> = ({
61-
children,
62-
variant = BadgeVariant.default,
63-
background = 'bg-gray-200',
64-
textColor = 'text-gray-800',
65-
className = '',
60+
children,
61+
variant = BadgeVariant.default,
62+
background = 'bg-gray-200',
63+
textColor = 'text-gray-800',
64+
className = '',
6665
}) => {
66+
/**
67+
* A mapping of badge variants to their corresponding background and text color styles.
68+
* This is used to determine the appearance of the badge based on the `variant` prop.
69+
*/
70+
const variantStyles: Record<
71+
BadgeVariant,
72+
{ background: string; textColor: string }
73+
> = {
74+
[BadgeVariant.default]: {
75+
background: 'bg-shark-800',
76+
textColor: 'text-shark-400',
77+
},
78+
[BadgeVariant.error]: {
79+
background: 'bg-tamarind-800',
80+
textColor: 'text-tamarind-400',
81+
},
82+
[BadgeVariant.success]: {
83+
background: 'bg-bush-800',
84+
textColor: 'text-bush-400',
85+
},
86+
[BadgeVariant.warning]: {
87+
background: 'bg-clinker-800',
88+
textColor: 'text-clinker-400',
89+
},
90+
[BadgeVariant.reference]: {
91+
background: 'bg-deep-teal-800',
92+
textColor: 'text-deep-teal-400',
93+
},
94+
};
6795

68-
/**
69-
* A mapping of badge variants to their corresponding background and text color styles.
70-
* This is used to determine the appearance of the badge based on the `variant` prop.
71-
*/
72-
const variantStyles: Record<
73-
BadgeVariant,
74-
{ background: string; textColor: string }
75-
> = {
76-
[BadgeVariant.default]: { background: 'bg-shark-800', textColor: 'text-shark-400' },
77-
[BadgeVariant.error]: { background: 'bg-tamarind-800', textColor: 'text-tamarind-400' },
78-
[BadgeVariant.success]: { background: 'bg-bush-800', textColor: 'text-bush-400' },
79-
[BadgeVariant.warning]: { background: 'bg-clinker-800', textColor: 'text-clinker-400' },
80-
[BadgeVariant.reference]: { background: 'bg-deep-teal-800', textColor: 'text-deep-teal-400' },
81-
};
82-
83-
/**
84-
* Determine the resolved background color for the badge.
85-
* If a custom background is provided, it overrides the default variant background.
86-
*/
87-
const resolvedBackground = background !== 'bg-gray-200' ? background : variantStyles[variant].background;
96+
/**
97+
* Determine the resolved background color for the badge.
98+
* If a custom background is provided, it overrides the default variant background.
99+
*/
100+
const resolvedBackground =
101+
background !== 'bg-gray-200'
102+
? background
103+
: variantStyles[variant].background;
88104

89-
/**
90-
* Determine the resolved text color for the badge.
91-
* If a custom text color is provided, it overrides the default variant text color.
92-
*/
93-
const resolvedTextColor = textColor !== 'text-gray-800' ? textColor : variantStyles[variant].textColor;
105+
/**
106+
* Determine the resolved text color for the badge.
107+
* If a custom text color is provided, it overrides the default variant text color.
108+
*/
109+
const resolvedTextColor =
110+
textColor !== 'text-gray-800'
111+
? textColor
112+
: variantStyles[variant].textColor;
94113

95-
/**
96-
* Renders the badge as a span element with dynamic classes for styling.
97-
* The classes include padding, rounded corners, font size, and the background and text colors determined above.
98-
*/
99-
return(
100-
<span className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${resolvedBackground} ${resolvedTextColor} ${className}`}>
101-
{children}
102-
</span>
103-
);
114+
/**
115+
* Renders the badge as a span element with dynamic classes for styling.
116+
* The classes include padding, rounded corners, font size, and the background and text colors determined above.
117+
*/
118+
return (
119+
<span
120+
className={`inline-block px-3 py-1 rounded-full text-sm font-semibold ${resolvedBackground} ${resolvedTextColor} ${className}`}
121+
>
122+
{children}
123+
</span>
124+
);
104125
};
105126

106-
export { Badge };
127+
export { Badge };

‎src/components/ui/scncard.tsx

+23-24
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,18 @@ import Cimg from './cimg';
1313
* - buttonLink: The URL the button should link to when clicked.
1414
*/
1515
interface CardProps {
16-
title: string;
17-
description: string;
18-
imageUrl: string;
19-
buttonLabel: string;
20-
buttonText: string;
21-
buttonLink: string;
16+
title: string;
17+
description: string;
18+
imageUrl: string;
19+
buttonLabel: string;
20+
buttonText: string;
21+
buttonLink: string;
2222
}
2323

24-
2524
/**
2625
* Card component displays a card with an image, title, description, and a button.
2726
* The component is designed to be responsive and adaptable to different screen sizes.
28-
*
27+
*
2928
* @param {string} title - The title displayed on the card.
3029
* @param {string} description - A short text describing the content of the card.
3130
* @param {string} imageUrl - The URL of the image to display on top of the card.
@@ -34,22 +33,22 @@ interface CardProps {
3433
* @param {string} buttonLink - The URL the button will link to.
3534
*/
3635
const Card: React.FC<CardProps> = ({
37-
title,
38-
description,
39-
imageUrl,
40-
buttonLabel,
41-
buttonText,
42-
buttonLink,
36+
title,
37+
description,
38+
imageUrl,
39+
buttonLabel,
40+
buttonText,
41+
buttonLink,
4342
}) => {
44-
return (
45-
<div className="border border-neutral-400 dark:border-neutral-800 rounded-lg shadow-lg overflow-hidden max-w-xs w-full">
46-
<Cimg id={imageUrl} alt={title} className='w-full h-48 object-cover' />
47-
<div className="p-6">
48-
<div className="font-semibold text-xl text-white mb-3">{title}</div>
49-
<p className="text-neutral-400 text-base mb-5">{description}</p>
50-
</div>
51-
</div>
52-
);
43+
return (
44+
<div className="border border-neutral-400 dark:border-neutral-800 rounded-lg shadow-lg overflow-hidden max-w-xs w-full">
45+
<Cimg id={imageUrl} alt={title} className="w-full h-48 object-cover" />
46+
<div className="p-6">
47+
<div className="font-semibold text-xl text-white mb-3">{title}</div>
48+
<p className="text-neutral-400 text-base mb-5">{description}</p>
49+
</div>
50+
</div>
51+
);
5352
};
5453

55-
export default Card;
54+
export default Card;

‎src/pages/_meta.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { link } from "fs";
2-
import { FaExternalLinkAlt } from "react-icons/fa";
1+
import { link } from 'fs';
2+
import { FaExternalLinkAlt } from 'react-icons/fa';
33

44
export default {
55
index: 'Introduction',

‎src/pages/contributing/codingstyle.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ import Feedback from '@/components/ui/feedback';
1414

1515
</Callout>
1616

17-
<Feedback />
17+
<Feedback />

‎src/pages/contributing/index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,4 @@ We use [Nextra](https://nextra.vercel.app/) and [Next.js](https://nextjs.org/) f
128128

129129
For more detailed instructions, refer to our [documentation guide]().
130130

131-
<Feedback />
131+
<Feedback />

‎src/pages/contributing/visuals.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -417,4 +417,4 @@ import BarchartExampleOne from '@/components/ui/barchart-example-one';
417417

418418
<BarchartExampleOne />
419419

420-
<Feedback />
420+
<Feedback />

‎src/pages/index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ Welcome to the ScribbleLabApp Documentation! This resource is your go-to guide f
2323
className=""
2424
/>
2525

26-
<Feedback />
26+
<Feedback />

‎tailwind.config.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default {
6363
900: 'var(--deep-teal-900)',
6464
950: 'var(--deep-teal-950)',
6565
},
66-
'tamarind': {
66+
tamarind: {
6767
50: 'var(--tamarind-50)',
6868
100: 'var(--tamarind-100)',
6969
200: 'var(--tamarind-200)',
@@ -76,7 +76,7 @@ export default {
7676
900: 'var(--tamarind-900)',
7777
950: 'var(--tamarind-950)',
7878
},
79-
'shark': {
79+
shark: {
8080
50: 'var(--shark-50)',
8181
100: 'var(--shark-100)',
8282
200: 'var(--shark-200)',
@@ -89,7 +89,7 @@ export default {
8989
900: 'var(--shark-900)',
9090
950: 'var(--shark-950)',
9191
},
92-
'clinker': {
92+
clinker: {
9393
50: 'var(--clinker-50)',
9494
100: 'var(--clinker-100)',
9595
200: 'var(--clinker-200)',
@@ -102,7 +102,7 @@ export default {
102102
900: 'var(--clinker-900)',
103103
950: 'var(--clinker-950)',
104104
},
105-
'bush': {
105+
bush: {
106106
50: 'var(--bush-50)',
107107
100: 'var(--bush-100)',
108108
200: 'var(--bush-200)',
@@ -115,7 +115,7 @@ export default {
115115
900: 'var(--bush-900)',
116116
950: 'var(--bush-950)',
117117
},
118-
'revolver': {
118+
revolver: {
119119
50: 'var(--revolver-50)',
120120
100: 'var(--revolver-100)',
121121
200: 'var(--revolver-200)',

0 commit comments

Comments
 (0)