klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-06 05:39:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add mroe card suggestions and simplify color selection for suggestion cards

Browse Source
This commit is contained in:
sabaimran
2024-07-29 19:11:39 +05:30
parent 551630f0f1
commit a6339bb973
5 changed files with 166 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/interface/web/app/components/suggestions/suggestionCard.tsx
View File

@@ -9,13 +9,23 @@ import {
import styles from "./suggestions.module.css";
import { getIconFromIconName } from "@/app/common/iconUtils";
import { converColorToBgGradient } from "@/app/common/colorUtils";
function convertSuggestionColorToIconClass(color: string) {
if (color.includes('blue')) return getIconFromIconName('Robot', 'blue', 'w-8', 'h-8');
if (color.includes('yellow')) return getIconFromIconName('Globe', 'yellow', 'w-8', 'h-8');
if (color.includes('green')) return getIconFromIconName('Palette', 'green', 'w-8', 'h-8');
else return getIconFromIconName('Lightbulb', 'orange', 'w-8', 'h-8');
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');
}
@@ -23,12 +33,12 @@ interface SuggestionCardProps {
title: string;
body: string;
link: string;
image: string;
color: string;
}
export default function SuggestionCard(data: SuggestionCardProps) {
const cardClassName = `${styles.card} ${data.color} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
const bgColors = converColorToBgGradient(data.color);
const cardClassName = `${styles.card} ${bgColors} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
const titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
const descriptionClassName = `${styles.text} dark:text-white`;
@@ -36,7 +46,7 @@ export default function SuggestionCard(data: SuggestionCardProps) {
<Card className={cardClassName}>
<CardHeader className="m-0 p-2 pb-1 relative">
<div className="flex flex-row md:flex-col">
{convertSuggestionColorToIconClass(data.image)}
{convertSuggestionTitleToIconClass(data.title.toLowerCase(), data.color.toLowerCase())}
<CardTitle className={titleClassName}>{data.title}</CardTitle>
</div>
</CardHeader>