Social handles CRUD (admin side, nothing user-facing)

web/config/tailwind.config.js

@@ -1,7 +1,37 @@
+import {
+  SiXHex,
+  SiThreadsHex,
+  SiInstagramHex,
+  SiFacebookHex,
+  SiTiktokHex,
+  SiYoutubeHex,
+  SiLinkedinHex,
+  SiGithubHex,
+} from '@icons-pack/react-simple-icons'
+
+const invertColor = (hex) => {
+  if (hex.startsWith('#')) hex = hex.slice(1)
+
+  if (hex.length !== 6) throw new Error('Invalid hex color code')
+
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+
+  const invertedR = (255 - r).toString(16).padStart(2, '0')
+  const invertedG = (255 - g).toString(16).padStart(2, '0')
+  const invertedB = (255 - b).toString(16).padStart(2, '0')
+
+  return `#${invertedR}${invertedG}${invertedB}`
+}
+
 /** @type {import('tailwindcss').Config} */
 export const content = ['src/**/*.{js,jsx,ts,tsx}']
 export const theme = {
   extend: {
+    width: {
+      46: '11.5rem',
+    },
     fontFamily: {
       syne: ['Syne', 'sans-serif'],
       inter: ['Inter', 'sans-serif'],
@@ -22,8 +52,43 @@ export const theme = {
         '100%': { transform: 'scale(0.75) translateY(-110%)', opacity: 0 },
       },
     },
+    colors: {
+      x: {
+        light: SiXHex,
+        dark: invertColor(SiXHex),
+      },
+      threads: {
+        light: SiThreadsHex,
+        dark: invertColor(SiThreadsHex),
+      },
+      instagram: {
+        light: SiInstagramHex,
+        dark: SiInstagramHex,
+      },
+      facebook: {
+        light: SiFacebookHex,
+        dark: SiFacebookHex,
+      },
+      tiktok: {
+        light: SiTiktokHex,
+        dark: invertColor(SiTiktokHex),
+      },
+      youtube: {
+        light: SiYoutubeHex,
+        dark: SiYoutubeHex,
+      },
+      linkedin: {
+        light: SiLinkedinHex,
+        dark: SiLinkedinHex,
+      },
+      github: {
+        light: SiGithubHex,
+        dark: invertColor(SiGithubHex),
+      },
+    },
   },
 }
 
+export const darkMode = ['class', '[data-theme="dark"]']
 export const plugins = [require('daisyui')]
 export const daisyui = { themes: ['light', 'dark'] }