khoj/src/interface/web/app/common/iconUtils.tsx

import React from "react";
import { convertColorToTextClass } from "./colorUtils";
import {
    Lightbulb,
    Robot,
    Aperture,
    GraduationCap,
    Jeep,
    Island,
    MathOperations,
    Asclepius,
    Couch,
    Code,
    Atom,
    ClockCounterClockwise,
    File,
    Globe,
    Palette,
    Book,
    Confetti,
    House,
    Translate,
    Image,
    BowlFood,
    Lectern,
    Wallet,
    PencilLine,
    Chalkboard,
} from "@phosphor-icons/react";
import { Markdown, OrgMode, Pdf, Word } from "@/app/components/logo/fileLogo";

interface IconMap {
    [key: string]: (color: string, width: string, height: string) => JSX.Element | null;
}

const iconMap: IconMap = {
    Lightbulb: (color: string, width: string, height: string) => (
        <Lightbulb className={`${width} ${height} ${color} mr-2`} />
    ),
    Robot: (color: string, width: string, height: string) => (
        <Robot className={`${width} ${height} ${color} mr-2`} />
    ),
    Aperture: (color: string, width: string, height: string) => (
        <Aperture className={`${width} ${height} ${color} mr-2`} />
    ),
    GraduationCap: (color: string, width: string, height: string) => (
        <GraduationCap className={`${width} ${height} ${color} mr-2`} />
    ),
    Jeep: (color: string, width: string, height: string) => (
        <Jeep className={`${width} ${height} ${color} mr-2`} />
    ),
    Island: (color: string, width: string, height: string) => (
        <Island className={`${width} ${height} ${color} mr-2`} />
    ),
    MathOperations: (color: string, width: string, height: string) => (
        <MathOperations className={`${width} ${height} ${color} mr-2`} />
    ),
    Asclepius: (color: string, width: string, height: string) => (
        <Asclepius className={`${width} ${height} ${color} mr-2`} />
    ),
    Couch: (color: string, width: string, height: string) => (
        <Couch className={`${width} ${height} ${color} mr-2`} />
    ),
    Code: (color: string, width: string, height: string) => (
        <Code className={`${width} ${height} ${color} mr-2`} />
    ),
    Atom: (color: string, width: string, height: string) => (
        <Atom className={`${width} ${height} ${color} mr-2`} />
    ),
    ClockCounterClockwise: (color: string, width: string, height: string) => (
        <ClockCounterClockwise className={`${width} ${height} ${color} mr-2`} />
    ),
    Globe: (color: string, width: string, height: string) => (
        <Globe className={`${width} ${height} ${color} mr-2`} />
    ),
    Palette: (color: string, width: string, height: string) => (
        <Palette className={`${width} ${height} ${color} mr-2`} />
    ),
    Book: (color: string, width: string, height: string) => (
        <Book className={`${width} ${height} ${color} mr-2`} />
    ),
    Confetti: (color: string, width: string, height: string) => (
        <Confetti className={`${width} ${height} ${color} mr-2`} />
    ),
    House: (color: string, width: string, height: string) => (
        <House className={`${width} ${height} ${color} mr-2`} />
    ),
    Translate: (color: string, width: string, height: string) => (
        <Translate className={`${width} ${height} ${color} mr-2`} />
    ),
    BowlFood: (color: string, width: string, height: string) => (
        <BowlFood className={`${width} ${height} ${color} mr-2`} />
    ),
    Lectern: (color: string, width: string, height: string) => (
        <Lectern className={`${width} ${height} ${color} mr-2`} />
    ),
    Wallet: (color: string, width: string, height: string) => (
        <Wallet className={`${width} ${height} ${color} mr-2`} />
    ),
    PencilLine: (color: string, width: string, height: string) => (
        <PencilLine className={`${width} ${height} ${color} mr-2`} />
    ),
    Chalkboard: (color: string, width: string, height: string) => (
        <Chalkboard className={`${width} ${height} ${color} mr-2`} />
    ),
};

function getIconFromIconName(
    iconName: string,
    color: string = "gray",
    width: string = "w-6",
    height: string = "h-6",
) {
    const icon = iconMap[iconName];
    const colorName = color.toLowerCase();
    const colorClass = convertColorToTextClass(colorName);
    return icon ? icon(colorClass, width, height) : null;
}

function getIconFromFilename(
    filename: string,
    className: string = "w-6 h-6 text-muted-foreground inline-flex mr-1",
) {
    const extension = filename.split(".").pop();
    switch (extension) {
        case "org":
            return <OrgMode className={className} />;
        case "markdown":
        case "md":
            return <Markdown className={className} />;
        case "pdf":
            return <Pdf className={className} />;
        case "doc":
            return <Word className={className} />;
        case "jpg":
        case "jpeg":
        case "png":
            return <Image className={className} weight="fill" />;
        default:
            return <File className={className} weight="fill" />;
    }
}

export { getIconFromIconName, getIconFromFilename };