Icon background colors

src/components/icon.tsx

@@ -2,32 +2,77 @@ import React from "react";
 import { is } from "../shared/is";
 import { IIcon } from "../shared/types";
 
+const iconColors = [
+	"blue",
+	"rose",
+	"green",
+	"red",
+	"yellow",
+	"cyan",
+	"pink",
+	"orange",
+	"sky",
+	"slate",
+	"emerald",
+	"zinc",
+	"neutral",
+	"amber",
+	"violet",
+];
+const iconLevel = 300;
+
+const getIconColor = (index: number) => `bg-${iconColors[iconColors.length % index]}-${iconLevel}`;
+
 interface IProps {
+	index: number;
 	icon?: IIcon;
 	uri?: string;
 }
 
-export const Icon: React.FunctionComponent<IProps> = ({ uri, icon }) => {
+export const Icon: React.FunctionComponent<IProps> = ({ uri, icon, index }) => {
 	if (is.null(icon)) {
-		return null;
+		return <IconBlank index={index} />;
 	}
 
 	if (!is.null(uri)) {
 		return (
 			<a href={uri}>
-				<IconBase {...(icon as IIcon)} />
+				<IconBase icon={icon as IIcon} index={index} />
 			</a>
 		);
 	}
 
-	return <IconBase {...(icon as IIcon)} />;
+	return <IconBase icon={icon as IIcon} index={index} />;
 };
 
-const IconBase: React.FunctionComponent<IIcon> = ({ href, alt, title }) => (
-	<img
-		src={href}
-		alt={alt}
-		title={title}
-		className="block w-16 h-16 rounded-2xl border border-black/5 shadow-sm overflow-hidden"
-	/>
-);
+interface IIconBlankProps {
+	index: number;
+}
+
+const IconBlank: React.FunctionComponent<IIconBlankProps> = ({ index }) => {
+	return (
+		<span
+			className={`block w-16 h-16 rounded-2xl border border-black/5 shadow-sm ${getIconColor(
+				index
+			)} overflow-hidden`}
+		/>
+	);
+};
+
+interface IIconBaseProps {
+	icon: IIcon;
+	index: number;
+}
+
+const IconBase: React.FunctionComponent<IIconBaseProps> = ({ icon, index }) => {
+	const { href, alt, title } = icon;
+
+	return (
+		<img
+			src={href}
+			alt={alt}
+			title={title}
+			className="block w-16 h-16 rounded-2xl border border-black/5 shadow-sm overflow-hidden"
+		/>
+	);
+};

src/components/services.tsx

@@ -3,24 +3,31 @@ import { is } from "../shared/is";
 import { IService } from "../shared/types";
 import { Icon } from "./icon";
 
-interface IProps {
+interface IServicesProps {
 	services: IService[];
 }
 
-export const Services: React.FunctionComponent<IProps> = ({ services }) => {
+export const Services: React.FunctionComponent<IServicesProps> = ({ services }) => {
 	return (
 		<ul className="grid grid-cols-5 gap-4">
 			{services.map((service, index) => (
-				<Service key={index} {...service} />
+				<Service key={index} service={service} index={index} />
 			))}
 		</ul>
 	);
 };
 
-const Service: React.FunctionComponent<IService> = ({ name, uri, description, icon }) => {
+interface IServiceProps {
+	service: IService;
+	index: number;
+}
+
+const Service: React.FunctionComponent<IServiceProps> = ({ service, index }) => {
+	const { name, uri, description, icon } = service;
+
 	return (
 		<li className="p-4 flex flex-col items-center">
-			{!is.null(icon) && <Icon icon={icon} uri={uri} />}
+			<Icon icon={icon} uri={uri} index={index} />
 			<h3 className="text-lg font-semibold line-clamp-1 mt-1">
 				<a href={uri}>{name}</a>
 			</h3>

src/shared/types.ts

@@ -24,9 +24,14 @@ export const FAKE_SERVICES: IService[] = [
 	{
 		name: "Calibre",
 		uri: "https://calibre.starbase80.dev",
+		description: "eBook library",
 	},
 	{
 		name: "Gitea",
 		uri: "https://git.starbase80.dev",
+		description: "Code hosting",
+		icon: {
+			href: "/icons/gitea.png",
+		},
 	},
 ];

tailwind.config.js

@@ -1,6 +1,24 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	safelist: [
+		/* Built from icon.tsx */
+		"bg-blue-300",
+		"bg-rose-300",
+		"bg-green-300",
+		"bg-red-300",
+		"bg-yellow-300",
+		"bg-cyan-300",
+		"bg-pink-300",
+		"bg-orange-300",
+		"bg-sky-300",
+		"bg-slate-300",
+		"bg-emerald-300",
+		"bg-zinc-300",
+		"bg-neutral-300",
+		"bg-amber-300",
+		"bg-violet-300",
+	],
 	theme: {
 		extend: {
 			colors: {