minor changes

Author: sanjibnarzary

components/CustomSwatch.tsx

@@ -19,8 +19,9 @@ import {
 import styles from "./CustomSwatch.module.css";
 import { classNames } from "@utils/classNames";
 import { useTheme } from "next-themes";
-import { Cross2Icon, InfoCircledIcon } from "@radix-ui/react-icons";
+import { Cross2Icon, FaceIcon, InfoCircledIcon } from "@radix-ui/react-icons";
 import { copy } from "../utils/clipboard";
+import { Avatar } from "radix-ui";
 
 const brightColors = ["amber", "yellow", "lime", "mint", "sky"];
 
@@ -32,6 +33,10 @@ interface CustomSwatchProps extends React.ComponentPropsWithoutRef<"button"> {
 	hexA: string;
 	p3: string;
 	p3A: string;
+	avatar: string;
+	name: string;
+	role: string;
+
 }
 
 export const CustomSwatch = ({
@@ -42,6 +47,9 @@ export const CustomSwatch = ({
 	hexA,
 	p3,
 	p3A,
+	avatar,
+	name,
+	role,
 	style,
 	...props
 }: CustomSwatchProps) => {
@@ -65,6 +73,8 @@ export const CustomSwatch = ({
 						)}
 						{...props}
 					>
+						
+						
 						<span style={{ backgroundColor: cssVariable, ...style }}>
 							<VisuallyHidden>
 								{scale} {step}
@@ -91,12 +101,17 @@ export const CustomSwatch = ({
 									width: "100%",
 									height: "100%",
 									backgroundColor: cssVariable,
+									backgroundImage: `url(${avatar})`,
+									backgroundSize: "cover",
+									backgroundPosition: "center",
+									borderRadius: 6,
 								}}
 							/>
+							
 						</Box>
 
 						<Heading as="h3" size="3" trim="both" my="4">
-							{friendlyColorName}
+							{name}
 						</Heading>
 
 						<Grid
@@ -106,25 +121,11 @@ export const CustomSwatch = ({
 							gapX="5"
 						>
 							<Text color="gray" size="2">
-								Usage
+								Role
 							</Text>
 							<Box mb={{ initial: "3", xs: "0" }}>
 								<Text size="2">
-									{["1", "2"].includes(step) && "Backgrounds"}
-									{["3", "4", "5"].includes(step) && "Interactive components"}
-									{["6", "7"].includes(step) && "Borders and separators"}
-									{["8"].includes(step) &&
-										isGray &&
-										"Borders, focus rings, disabled text"}
-									{["8"].includes(step) && !isGray && "Borders, focus rings"}
-									{["9", "10"].includes(step) &&
-										isGray &&
-										"Solid backgrounds, disabled text"}
-									{["9", "10"].includes(step) &&
-										!isGray &&
-										"Solid backgrounds, buttons"}
-									{["11"].includes(step) && "Secondary text, links"}
-									{["12"].includes(step) && "High-contrast text"}
+									{role}
 								</Text>
 							</Box>
 

pages/developer/custom.tsx

@@ -338,29 +338,35 @@ export default function Page() {
 								12
 							</ColorStepLabel>
 
-							{Array.from({ length: 12 }, (_, i) => i + 1).map((step, i) => (
+							{peopleData.map((person, i) => (
 								<CustomSwatch
-									key={step}
-									scale={accent === "custom" ? "accent" : accent}
-									step={step.toString()}
-									cssVariable={`var(--${accent}-${step})`}
-									hex={result.accentScale[i].toUpperCase()}
-									hexA={result.accentScaleAlpha[i].toUpperCase()}
-									p3={result.accentScaleWideGamut[i]}
-									p3A={result.accentScaleAlphaWideGamut[i]}
+									key={person.id}
+									scale="gray"
+									step={(i + 1).toString()}
+									cssVariable={`var(--gray-${i + 1})`}
+									hex={result.grayScale[i]?.toUpperCase()}
+									hexA={result.grayScaleAlpha[i]?.toUpperCase()}
+									p3={result.grayScaleWideGamut[i]}
+									p3A={result.grayScaleAlphaWideGamut[i]}
+									avatar={person.avatar}
+									name={person.name}
+									role={person.role}
 								/>
 							))}
 
-							{Array.from({ length: 12 }, (_, i) => i + 1).map((step, i) => (
+							{peopleData.map((person, i) => (
 								<CustomSwatch
-									key={step}
+									key={person.id}
 									scale="gray"
-									step={step.toString()}
-									cssVariable={`var(--gray-${step})`}
-									hex={result.grayScale[i].toUpperCase()}
-									hexA={result.grayScaleAlpha[i].toUpperCase()}
+									step={(i + 1).toString()}
+									cssVariable={`var(--gray-${i + 1})`}
+									hex={result.grayScale[i]?.toUpperCase()}
+									hexA={result.grayScaleAlpha[i]?.toUpperCase()}
 									p3={result.grayScaleWideGamut[i]}
 									p3A={result.grayScaleAlphaWideGamut[i]}
+									avatar={person.avatar}
+									name={person.name}
+									role={person.role}
 								/>
 							))}
 						</Grid>
@@ -389,6 +395,20 @@ interface ToDoList {
 	onItemsChange: (items: ToDoItem[]) => void;
 }
 
+const peopleData = [
+	{ id: 1, name: "Sanjib Narzary", role: "Research and Development", avatar: "https://www.cit.ac.in/uploads/users/images/1755229478.jpg" },
+	{ id: 2, name: "Rahul Singh", role: "Research and Development", avatar: "/avatars/rahul.png" },
+	{ id: 3, name: "Priya Das", role: "Engineering and Technology", avatar: "/avatars/priya.png" },
+	{ id: 4, name: "Amitabh Roy", role: "Engineering and Technology", avatar: "/avatars/amitabh.png" },
+	{ id: 5, name: "Sneha Patil", role: "Students and Pioneers", avatar: "/avatars/sneha.png" },
+	{ id: 6, name: "Vikram Joshi", role: "Students and Pioneers", avatar: "/avatars/vikram.png" },
+	{ id: 7, name: "Rituparna Barman", role: "Management", avatar: "/avatars/rituparna.png" },
+	{ id: 8, name: "Manoj Kumar", role: "Management", avatar: "/avatars/manoj.png" },
+	{ id: 9, name: "Suman Deka", role: "Supporting Staff", avatar: "/avatars/suman.png" },
+	{ id: 10, name: "Geeta Devi", role: "Supporting Staff", avatar: "/avatars/geeta.png" },
+	{ id: 11, name: "Arjun Nath", role: "Supporting Staff", avatar: "/avatars/arjun.png" },
+	{ id: 12, name: "Meera Jain", role: "Supporting Staff", avatar: "/avatars/meera.png" },
+];
 const ToDoList = ({ items, onItemsChange }: ToDoList) => {
 	return (
 		<Flex gap="2" direction="column">