Add code host logos for gitlab & github

This commit is contained in:
bkellam 2024-09-06 17:37:02 -07:00
parent 9c7db7509f
commit b79d068abd
3 changed files with 54 additions and 3 deletions

1
public/github.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

After

Width:  |  Height:  |  Size: 822 B

1
public/gitlab.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitLab</title><path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z"/></svg>

After

Width:  |  Height:  |  Size: 573 B

View file

@ -5,7 +5,11 @@ import { Separator } from "@/components/ui/separator";
import { ZoektFileMatch } from "@/lib/types";
import { Scrollbar } from "@radix-ui/react-scroll-area";
import { useMemo, useState } from "react";
import { DoubleArrowDownIcon, DoubleArrowUpIcon } from "@radix-ui/react-icons";
import { DoubleArrowDownIcon, DoubleArrowUpIcon, FileIcon } from "@radix-ui/react-icons";
import Image from "next/image";
import githubLogo from "../../../public/github.svg";
import gitlabLogo from "../../../public/gitlab.svg";
import clsx from "clsx";
const MAX_MATCHES_TO_PREVIEW = 5;
@ -63,10 +67,55 @@ const FileMatch = ({
return sortedMatches;
}, [match, showAll]);
const { repoIcon, repoName, repoLink } = useMemo(() => {
if (match.Repo.startsWith("github.com")) {
return {
repoName: match.Repo.substring("github.com/".length),
repoLink: `https://${match.Repo}`,
repoIcon: <Image
src={githubLogo}
alt="GitHub"
className="w-4 h-4 dark:invert"
/>
}
}
if (match.Repo.startsWith("gitlab.com")) {
return {
repoName: match.Repo.substring("gitlab.com/".length),
repoLink: `https://${match.Repo}`,
repoIcon: <Image
src={gitlabLogo}
alt="GitLab"
className="w-4 h-4 dark:invert"
/>
}
}
return {
repoName: match.Repo,
repoLink: undefined,
repoIcon: <FileIcon className="w-4 h-4" />
}
}, [match]);
return (
<div>
<div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2">
<span>{match.Repo} · {match.FileName}</span>
<div className="bg-cyan-200 dark:bg-cyan-900 primary-foreground px-2 flex flex-row gap-2 items-center">
{repoIcon}
<span
className={clsx("font-medium", {
"cursor-pointer hover:underline": repoLink,
})}
onClick={() => {
if (repoLink) {
window.open(repoLink, "_blank");
}
}}
>
{repoName}
</span>
<span>· {match.FileName}</span>
</div>
{matches.map((match, index) => {
const fragment = match.Fragments[0];