mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-23 15:38:55 +01:00
Fix selection of icons, colors, add examples for personal finance
This commit is contained in:
parent
af6a70c9fb
commit
f835e330b8
3 changed files with 99 additions and 19 deletions
|
@ -21,6 +21,9 @@ import {
|
|||
House,
|
||||
Translate,
|
||||
Image,
|
||||
BowlFood,
|
||||
Lectern,
|
||||
Wallet,
|
||||
} from "@phosphor-icons/react";
|
||||
import { Markdown, OrgMode, Pdf, Word } from "@/app/components/logo/fileLogo";
|
||||
|
||||
|
@ -83,6 +86,15 @@ const iconMap: IconMap = {
|
|||
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`} />
|
||||
),
|
||||
};
|
||||
|
||||
function getIconFromIconName(
|
||||
|
|
|
@ -2,23 +2,9 @@
|
|||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
import styles from "./suggestions.module.css";
|
||||
import { getIconFromIconName } from "@/app/common/iconUtils";
|
||||
import { converColorToBgGradient } from "@/app/common/colorUtils";
|
||||
import { convertSuggestionTitleToIconClass } from "./suggestionsData";
|
||||
|
||||
function convertSuggestionTitleToIconClass(title: string, color: string) {
|
||||
if (title.includes("automation")) return getIconFromIconName("Robot", color, "w-8", "h-8");
|
||||
if (title.includes("online")) return getIconFromIconName("Globe", color, "w-8", "h-8");
|
||||
if (title.includes("paint")) return getIconFromIconName("Palette", color, "w-8", "h-8");
|
||||
if (title.includes("pop")) return getIconFromIconName("Confetti", color, "w-8", "h-8");
|
||||
if (title.includes("travel")) return getIconFromIconName("Jeep", color, "w-8", "h-8");
|
||||
if (title.includes("learn")) return getIconFromIconName("Book", color, "w-8", "h-8");
|
||||
if (title.includes("health")) return getIconFromIconName("Asclepius", color, "w-8", "h-8");
|
||||
if (title.includes("fun")) return getIconFromIconName("Island", color, "w-8", "h-8");
|
||||
if (title.includes("home")) return getIconFromIconName("House", color, "w-8", "h-8");
|
||||
if (title.includes("language")) return getIconFromIconName("Translate", color, "w-8", "h-8");
|
||||
if (title.includes("code")) return getIconFromIconName("Code", color, "w-8", "h-8");
|
||||
else return getIconFromIconName("Lightbulb", color, "w-8", "h-8");
|
||||
}
|
||||
|
||||
interface SuggestionCardProps {
|
||||
title: string;
|
||||
|
@ -38,7 +24,7 @@ export default function SuggestionCard(data: SuggestionCardProps) {
|
|||
<CardHeader className="m-0 p-2 pb-1 relative">
|
||||
<div className="flex flex-row md:flex-col">
|
||||
{convertSuggestionTitleToIconClass(
|
||||
data.title.toLowerCase(),
|
||||
data.title,
|
||||
data.color.toLowerCase(),
|
||||
)}
|
||||
<CardTitle className={titleClassName}>{data.title}</CardTitle>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import { getIconFromIconName } from "@/app/common/iconUtils";
|
||||
|
||||
export interface Suggestion {
|
||||
type: string;
|
||||
color: string;
|
||||
|
@ -5,7 +7,7 @@ export interface Suggestion {
|
|||
link: string;
|
||||
}
|
||||
|
||||
enum SuggestionType {
|
||||
export enum SuggestionType {
|
||||
Automation = "Automation",
|
||||
Paint = "Paint",
|
||||
Travel = "Travel",
|
||||
|
@ -18,6 +20,7 @@ enum SuggestionType {
|
|||
Home = "Home",
|
||||
Fun = "Fun",
|
||||
Code = "Code",
|
||||
Finance = "Finance",
|
||||
}
|
||||
|
||||
const suggestionToColorMap: { [key in SuggestionType]?: string } = {};
|
||||
|
@ -27,7 +30,7 @@ function addSuggestionColorMap(type: SuggestionType, color: string) {
|
|||
}
|
||||
|
||||
addSuggestionColorMap(SuggestionType.Automation, "blue");
|
||||
addSuggestionColorMap(SuggestionType.Paint, "green");
|
||||
addSuggestionColorMap(SuggestionType.Paint, "indigo");
|
||||
addSuggestionColorMap(SuggestionType.Travel, "yellow");
|
||||
addSuggestionColorMap(SuggestionType.Health, "orange");
|
||||
addSuggestionColorMap(SuggestionType.Learning, "purple");
|
||||
|
@ -38,9 +41,28 @@ addSuggestionColorMap(SuggestionType.Interviewing, "purple");
|
|||
addSuggestionColorMap(SuggestionType.Home, "green");
|
||||
addSuggestionColorMap(SuggestionType.Fun, "fuchsia");
|
||||
addSuggestionColorMap(SuggestionType.Code, "purple");
|
||||
addSuggestionColorMap(SuggestionType.Finance, "green")
|
||||
|
||||
const DEFAULT_COLOR = "orange";
|
||||
|
||||
export function convertSuggestionTitleToIconClass(title: string, color: string) {
|
||||
if (title === SuggestionType.Automation) return getIconFromIconName("Robot", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Paint) return getIconFromIconName("Palette", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.PopCulture) return getIconFromIconName("Confetti", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Travel) return getIconFromIconName("Jeep", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Learning) return getIconFromIconName("Book", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Health) return getIconFromIconName("Asclepius", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Fun) return getIconFromIconName("Island", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Home) return getIconFromIconName("House", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Language) return getIconFromIconName("Translate", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Code) return getIconFromIconName("Code", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Food) return getIconFromIconName("BowlFood", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Interviewing) return getIconFromIconName("Lectern", color, "w-8", "h-8");
|
||||
if (title === SuggestionType.Finance) return getIconFromIconName("Wallet", color, "w-8", "h-8");
|
||||
else return getIconFromIconName("Lightbulb", color, "w-8", "h-8");
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const suggestionsData: Suggestion[] = [
|
||||
{
|
||||
|
@ -598,5 +620,65 @@ export const suggestionsData: Suggestion[] = [
|
|||
color: suggestionToColorMap[SuggestionType.Fun] || DEFAULT_COLOR,
|
||||
description: "Create a list of fun activities for a family game night.",
|
||||
link: "",
|
||||
}
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Explain the concept of compound interest and its importance in long-term savings.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Provide an overview of different types of retirement accounts (e.g., 401(k), IRA, Roth IRA).",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Describe strategies for creating and sticking to a personal budget.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Explain the basics of stock market investing for beginners.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Outline the pros and cons of renting vs. buying a home.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Describe different methods for paying off debt, such as the snowball and avalanche methods.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Explain the importance of an emergency fund and how to build one.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Provide an overview of different types of insurance and their importance in financial planning.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Explain the concept of diversification in investment portfolios.",
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
type: SuggestionType.Finance,
|
||||
color: suggestionToColorMap[SuggestionType.Finance] || DEFAULT_COLOR,
|
||||
description: "Describe strategies for minimizing tax liability legally.",
|
||||
link: "",
|
||||
},
|
||||
];
|
||||
|
|
Loading…
Reference in a new issue