Fuma studio

Colors

Installation

npx shadcn@latest add http://fumastudio/com/r/colors.json
components/fumastudio/colors.tsx
type HttpMethod =
	| "GET"
	| "POST"
	| "DELETE"
	| "PATCH"
	| "PUT"
	| "HEAD"
	| "OPTIONS"
	| "TRACE"
	| "CONNECT";

interface StyleSet {
	method: string;
	tryit: string;
	special: string;
	badge: string;
}

interface Options {
	isSpecial?: boolean;
	isBadge?: boolean;
	tryit?: boolean;
}

const colors = (method?: string, options?: Options) => {
	const styles: Record<HttpMethod, StyleSet> = {
		POST: {
			method: "bg-blue-400/20 dark:bg-blue-400/20 text-blue-700 dark:text-blue-400",
			tryit: "text-blue-700 dark:text-blue-400",
			special: "text-[#3064E3] bg-[#3064E3]/10 border-[#3064E3]/30",
			badge: "bg-blue-400/20 dark:bg-blue-400/20 text-blue-700 dark:text-blue-400",
		},
		GET: {
			method: "bg-green-400/20 dark:bg-green-400/20 text-green-700 dark:text-green-400",
			tryit: "text-green-700 dark:text-green-400",
			special: "text-[#2AB673] bg-[#2AB673]/10 border-[#2AB673]/30",
			badge: " bg-green-400/20 dark:bg-green-400/20 text-green-700 dark:text-green-400",
		},
		DELETE: {
			method: "bg-red-400/20 dark:bg-red-400/20 text-red-700 dark:text-red-400",
			tryit: "text-red-700 dark:text-red-400",
			special: "text-[#CB3A32] bg-[#CB3A32]/10 border-[#CB3A32]/30",
			badge: "bg-red-400/20 dark:bg-red-400/20 text-red-700 dark:text-red-400",
		},
		PATCH: {
			method: "bg-orange-400/20 dark:bg-orange-400/20 text-orange-700 dark:text-orange-400",
			tryit: "text-orange-700 dark:text-orange-400",
			special: "text-[#DA622B] bg-[#DA622B]/10 border-[#DA622B]/30",
			badge: "bg-orange-400/20 dark:bg-orange-400/20 text-orange-700 dark:text-orange-400",
		},
		PUT: {
			method: "bg-yellow-400/20 dark:bg-yellow-400/20 text-yellow-700 dark:text-yellow-400",
			tryit: "text-yellow-700 dark:text-yellow-400",
			special: "text-[#C28C30] bg-[#C28C30]/10 border-[#C28C30]/30",
			badge: "bg-yellow-400/20 dark:bg-yellow-400/20 text-yellow-700 dark:text-yellow-400",
		},
		HEAD: {
			method: "bg-cyan-400/20 dark:bg-cyan-400/20 text-cyan-700 dark:text-cyan-400",
			tryit: "text-cyan-700 dark:text-cyan-400",
			special: "text-[#0e7490] dark:text-[#00d3f2] bg-[#00d3f2]/10 border-[#00d3f2]/30",
			badge: "",
		},
		OPTIONS: {
			method: "bg-purple-400/20 dark:bg-purple-400/20 text-purple-700 dark:text-purple-400",
			tryit: "text-purple-700 dark:text-purple-400",
			special: "text-[#7C3AED] bg-[#7C3AED]/10 border-[#7C3AED]/30",
			badge: "",
		},
		TRACE: {
			method: "bg-pink-400/20 dark:bg-pink-400/20 text-pink-700 dark:text-pink-400",
			tryit: "text-pink-700 dark:text-pink-400",
			special: "text-[#DB2777] bg-[#DB2777]/10 border-[#DB2777]/30",
			badge: "",
		},
		CONNECT: {
			method: "bg-indigo-400/20 dark:bg-indigo-400/20 text-indigo-700 dark:text-indigo-400",
			tryit: "text-indigo-700 dark:text-indigo-400",
			special: "text-[#4F46E5] bg-[#4F46E5]/10 border-[#4F46E5]/30",
			badge: "",
		},
	};

	if (!method) return "";

	const upperMethod = method.toUpperCase() as HttpMethod;
	const styleSet = styles[upperMethod];

	if (!styleSet) {
		return options?.isSpecial
			? "text-primary bg-primary/10 border-primary/30"
			: "text-primary";
	}

	if (options?.isSpecial) {
		return styleSet.special;
	} else if (options?.isBadge) {
		return styleSet.badge;
	} else if (options?.tryit) {
		return styleSet.tryit;
	}

	return styleSet.method;
};

export { colors };

Usage

components/fumastudio/colors.tsx
// Internal component

Props