color tags

src/components/TagChips/TagChips.tsx

@@ -1,17 +1,40 @@
 import { FC } from 'react';
 
 import Chip from '@mui/material/Chip'
+import {
+    purple,
+    blue,
+    lightBlue,
+    lightGreen,
+    green,
+    pink,
+    indigo,
+    teal,
+    lime,
+    amber
+} from '@mui/material/colors';
 
 interface TagChipsProps {
     tags: string[]
 }
 
+const colors = [purple, blue, lightGreen, green, pink, indigo, lime, amber, teal, lightBlue]
+
+function mapColor(tag: string) {
+    let hash = 0
+    for (let i = 0; i < tag.length; i++) {
+        hash += tag.charCodeAt(i)
+    }
+    const index = hash % colors.length
+    return colors[index][200]
+}
+
 const TagChips: FC<TagChipsProps> = ({ tags }) => {
     return tags.map((tag: string) => {
         return <Chip
             label={tag}
             key={tag}
-            sx={{ mr: 1 }}
+            sx={{ mr: 1, backgroundColor: mapColor(tag) }}
         />
     })
 }

src/routes/Writing/Writing.tsx

@@ -12,7 +12,7 @@ const Writing: FC<WritingProps> = () => {
             subtitle="Subtitle"
             body="Lorum ipsum dolor sit amet"
             date={new Date('2024-04-18')}
-            tags={['one', 'two', 'three']}
+            tags={['one', 'two', 'tag three']}
         />
     </Container>
 }

src/theme/customColorConfig.ts

@@ -20,3 +20,9 @@ declare module '@mui/material/Button' {
         tertiary: true;
     }
 }
+
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        tertiary: true
+    }
+}