mirror of
https://github.com/khoaliber/khoj.git
synced 2026-03-03 05:29:12 +00:00
Use custom Khoj Icons for Search, Agents & Automation in Nav Menu
- Update agents, automations, search svg icons
This commit is contained in:
Debanjum Singh Solanky
@@ -1,10 +1,11 @@
|
||||
export function KhojLogoType() {
|
||||
export function KhojLogoType({ className }: { className?: string }) {
|
||||
const classes = className ?? "fill-zinc-950 dark:fill-zinc-300";
|
||||
return (
|
||||
<svg
|
||||
width="70"
|
||||
height="auto"
|
||||
viewBox="0 0 442 200"
|
||||
className="fill-zinc-950 dark:fill-zinc-300"
|
||||
className={`${classes}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_45_75)">
|
||||
@@ -45,13 +46,14 @@ export function KhojLogoType() {
|
||||
);
|
||||
}
|
||||
|
||||
export function KhojLogo() {
|
||||
export function KhojLogo({ className }: { className?: string }) {
|
||||
const classes = className ?? "fill-zinc-950 dark:fill-zinc-300";
|
||||
return (
|
||||
<svg
|
||||
width="200"
|
||||
height="200"
|
||||
viewBox="0 0 200 200"
|
||||
className="fill-zinc-950 dark:fill-zinc-300"
|
||||
className={`${classes}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clipPath="url(#clip0_45_75)">
|
||||
@@ -87,3 +89,106 @@ export function KhojLogo() {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function KhojSearchLogo({ className }: { className?: string }) {
|
||||
const classes = className ?? "w-6 h-6";
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 27 27"
|
||||
fill="none"
|
||||
className={classes}
|
||||
>
|
||||
<path
|
||||
d="m 18.562765,17.147843 c 1.380497,-1.679442 2.307667,-4.013099 2.307667,-6.330999 C 20.870432,5.3951476 16.353958,1 10.782674,1 5.2113555,1 0.69491525,5.3951476 0.69491525,10.816844 c 0,5.421663 4.51644025,9.816844 10.08775875,9.816844 2.381867,0 4.570922,-0.803307 6.296712,-2.14673 0.508475,-0.508475 4.514633,4.192839 4.514633,4.192839 1.036377,1.008544 2.113087,-0.02559 1.07671,-1.034139 z m -7.780091,1.925408 c -4.3394583,0 -8.6708434,-4.033489 -8.6708434,-8.256407 0,-4.2229187 4.3313851,-8.2564401 8.6708434,-8.2564401 4.339458,0 8.670809,4.2369112 8.670809,8.4598301 0,4.222918 -4.331351,8.053017 -8.670809,8.053017 z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
fillOpacity="1"
|
||||
strokeWidth="1.10519"
|
||||
strokeDasharray="none"
|
||||
/>
|
||||
<path
|
||||
d="m 13.337351,9.3402647 0.05184,2.1532893"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.95702"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="M 8.431347,9.2809457 8.483191,11.434235"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.95701"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function KhojAutomationLogo({ className }: { className?: string }) {
|
||||
const classes = className ?? "w-6 h-6";
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 27 27"
|
||||
fill="none"
|
||||
className={classes}
|
||||
>
|
||||
<path
|
||||
d="m 20.503667,19.512812 c 1.498791,-1.721309 2.505409,-4.113142 2.505409,-6.488822 0,-5.556853 -4.903485,-10.0615654 -10.952165,-10.0615654 -6.0487172,0 -10.9521652,4.5047124 -10.9521652,10.0615654 0,5.556818 4.903448,10.061562 10.9521652,10.061562 2.585967,0 4.962599,-0.823331 6.836268,-2.200243 z m -8.446756,1.973405 c -4.7113005,0 -9.4138363,-4.134038 -9.4138363,-8.462227 0,-4.3281914 4.7025358,-8.4622628 9.4138363,-8.4622628 4.711301,0 9.4138,4.3425313 9.4138,8.6707228 0,4.328187 -4.702499,8.253767 -9.4138,8.253767 z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
fillOpacity="1"
|
||||
strokeWidth="1.16584"
|
||||
strokeDasharray="none"
|
||||
/>
|
||||
<path
|
||||
d="m 14.703831,11.557853 0.0553,2.175599"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.03174"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="m 9.470316,11.497919 0.055305,2.175598"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.03172"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="m 13.921987,2.0293778 c -1.700446,0.00578 -2.945437,0.011553 -3.53279,0.01733"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.69465"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path
|
||||
d="m 21.395697,5.8423397 -1.28226,1.167146"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.03172"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function KhojAgentLogo({ className }: { className?: string }) {
|
||||
const classes = className ?? "w-6 h-6";
|
||||
// Icon Source: AI by Palash Jain from <a href="https://thenounproject.com/browse/icons/term/ai/" target="_blank" title="AI Icons">Noun Project</a> (CC BY 3.0)
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 64 64"
|
||||
fill="none"
|
||||
className={classes}
|
||||
>
|
||||
<path
|
||||
d="m 30.065286,2.6838408 c 0,-1.0516338 -0.536857,-0.2904639 -1.602626,-0.2904639 -1.065769,0 -2.256759,-0.7611699 -2.256759,0.2904639 v 4.7442407 c 0,0.019613 2.9e-4,0.03913 8.68e-4,0.058553 C 12.904724,8.2984689 2.0847457,17.487997 2.0847457,31.229969 c 0,3.541245 0.7282659,6.446979 2.1822891,8.775946 1.4616456,2.341058 3.5599931,3.944353 6.0242102,5.03229 4.798181,2.118273 11.240941,2.377047 17.844348,2.377047 6.603408,0 13.046168,-0.258774 17.844349,-2.377047 2.464217,-1.087937 4.562564,-2.691232 6.02421,-5.03229 1.454023,-2.328967 2.182289,-5.234701 2.182289,-8.775946 0,-13.741972 -10.819978,-22.9315001 -24.122023,-23.7433349 5.78e-4,-0.019422 8.68e-4,-0.03894 8.68e-4,-0.058553 z m -1.929693,8.5525432 c -12.474689,0 -22.1914625,8.103305 -22.1914625,19.993585 0,3.031408 0.6216504,5.19719 1.6087846,6.778396 0.9796083,1.568926 2.4136592,2.714368 4.3145029,3.553622 3.932038,1.735919 9.549855,2.044963 16.268175,2.044963 6.718321,0 12.336138,-0.309044 16.268176,-2.044963 1.900843,-0.839254 3.334894,-1.984696 4.314503,-3.553622 0.987134,-1.581206 1.608784,-3.746988 1.608784,-6.778396 0,-11.89028 -9.716773,-19.993585 -22.191463,-19.993585 z M 16.557439,22.66129 c 1.065769,0 1.929692,0.852488 1.929692,1.904151 v 5.712452 c 0,1.051663 -0.863923,1.904151 -1.929692,1.904151 -1.065769,0 -1.929692,-0.852488 -1.929692,-1.904151 v -5.712452 c 0,-1.051663 0.863923,-1.904151 1.929692,-1.904151 z m 22.191463,0 c 1.065769,0 1.929692,0.852488 1.929692,1.904151 v 5.712452 c 0,1.051663 -0.863923,1.904151 -1.929692,1.904151 -1.065769,0 -1.929693,-0.852488 -1.929693,-1.904151 v -5.712452 c 0,-1.051663 0.863924,-1.904151 1.929693,-1.904151 z M 8.2209746,53.949727 c 6.4574264,-1.16515 13.1131284,-1.774098 19.9146184,-1.774098 6.801587,0 13.457289,0.608948 19.914716,1.774098 1.048305,0.189177 2.053578,-0.496127 2.245293,-1.530557 0.191715,-1.034525 -0.502781,-2.026492 -1.551087,-2.215575 -6.685419,-1.206374 -13.573456,-1.836268 -20.608922,-1.836268 -7.035465,0 -13.923502,0.629894 -20.6088253,1.836268 -1.0484018,0.189083 -1.7428981,1.18105 -1.5511832,2.215575 0.1917149,1.03443 1.1969882,1.719734 2.2453901,1.530557 z"
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -34,6 +34,7 @@ import {
|
||||
ArrowRight,
|
||||
UsersFour,
|
||||
} from "@phosphor-icons/react";
|
||||
import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
|
||||
|
||||
export default function NavMenu() {
|
||||
const userData = useAuthenticatedData();
|
||||
@@ -123,7 +124,7 @@ export default function NavMenu() {
|
||||
<DropdownMenuItem>
|
||||
<Link href="/agents" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<UsersFour className="w-6 h-6" />
|
||||
<KhojAgentLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Agents</p>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -131,7 +132,7 @@ export default function NavMenu() {
|
||||
<DropdownMenuItem>
|
||||
<Link href="/automations" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<Robot className="w-6 h-6" />
|
||||
<KhojAutomationLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Automations</p>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -140,7 +141,7 @@ export default function NavMenu() {
|
||||
<DropdownMenuItem>
|
||||
<Link href="/search" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<MagnifyingGlass className="w-6 h-6" />
|
||||
<KhojSearchLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Search</p>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -230,7 +231,7 @@ export default function NavMenu() {
|
||||
<MenubarItem>
|
||||
<Link href="/agents" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<UsersFour className="w-6 h-6" />
|
||||
<KhojAgentLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Agents</p>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -238,7 +239,7 @@ export default function NavMenu() {
|
||||
<MenubarItem>
|
||||
<Link href="/automations" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<Robot className="w-6 h-6" />
|
||||
<KhojAutomationLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Automations</p>
|
||||
</div>
|
||||
</Link>
|
||||
@@ -247,7 +248,7 @@ export default function NavMenu() {
|
||||
<MenubarItem>
|
||||
<Link href="/search" className="no-underline w-full">
|
||||
<div className="flex flex-rows">
|
||||
<MagnifyingGlass className="w-6 h-6" />
|
||||
<KhojSearchLogo className="w-6 h-6" />
|
||||
<p className="ml-3 font-semibold">Search</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user