aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update shortcut view

Browse Source
This commit is contained in:
Steven
2023-11-12 11:34:09 +08:00
parent 4a25fbb2f6
commit cb3e3bfaef
8 changed files with 68 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/web/src/components/ShortcutView.tsx
View File

@ -1,69 +1,65 @@
import classNames from "classnames";
import { Link } from "react-router-dom";
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
import { getFaviconWithGoogleS2 } from "../helpers/utils";
import Icon from "./Icon";
import ShortcutActionsDropdown from "./ShortcutActionsDropdown";
interface Props {
shortcut: Shortcut;
className?: string;
showActions?: boolean;
alwaysShowLink?: boolean;
onClick?: () => void;
}
const ShortcutView = (props: Props) => {
const { shortcut, className } = props;
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
const { shortcut, className, showActions, alwaysShowLink, onClick } = props;
const favicon = getFaviconWithGoogleS2(shortcut.link);
return (
<>
<div
className={classNames(
"group w-full px-3 py-2 flex flex-col justify-start items-start border rounded-lg hover:bg-gray-100 hover:shadow dark:border-zinc-800 dark:hover:bg-zinc-800",
className
<div
className={classNames(
"group w-full px-3 py-2 flex flex-row justify-start items-center border rounded-lg hover:bg-gray-100 dark:border-zinc-800 dark:hover:bg-zinc-800",
className
)}
onClick={onClick}
>
<Link to={`/shortcut/${shortcut.id}`} className={classNames("w-5 h-5 flex justify-center items-center overflow-clip shrink-0")}>
{favicon ? (
<img className="w-full h-auto rounded-lg" src={favicon} decoding="async" loading="lazy" />
) : (
<Icon.CircleSlash className="w-full h-auto text-gray-400" />
)}
</Link>
<div className="ml-1 w-full truncate">
{shortcut.title ? (
<>
<span className="dark:text-gray-400">{shortcut.title}</span>
<span className="text-gray-500">(s/{shortcut.name})</span>
</>
) : (
<>
<span className="text-gray-400 dark:text-gray-500">s/</span>
<span className="dark:text-gray-400">{shortcut.name}</span>
</>
)}
>
<div className="w-full flex flex-row justify-between items-center">
<div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
<Link to={`/shortcut/${shortcut.id}`} className={classNames("w-5 h-5 flex justify-center items-center overflow-clip shrink-0")}>
{favicon ? (
<img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
) : (
<Icon.CircleSlash className="w-full h-auto text-gray-400" />
)}
</Link>
<div className="ml-1 w-[calc(100%-20px)] flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-center">
<a
className={classNames(
"max-w-full flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:underline"
)}
href={shortcutLink}
target="_blank"
>
<div className="truncate">
<span className="dark:text-gray-400">{shortcut.title}</span>
{shortcut.title ? (
<span className="text-gray-500">(s/{shortcut.name})</span>
) : (
<>
<span className="text-gray-400 dark:text-gray-500">s/</span>
<span className="truncate dark:text-gray-400">{shortcut.name}</span>
</>
)}
</div>
<span className="hidden group-hover:block ml-1 cursor-pointer shrink-0">
<Icon.ExternalLink className="w-4 h-auto text-gray-600" />
</span>
</a>
</div>
</div>
</div>
<div className="flex flex-row justify-end items-center">
<ShortcutActionsDropdown shortcut={shortcut} />
</div>
</div>
</div>
</>
<Link
className={classNames(
"hidden group-hover:block ml-1 w-6 h-6 p-1 shrink-0 rounded-lg bg-gray-200 dark:bg-zinc-900 hover:opacity-80",
alwaysShowLink && "!block"
)}
to={`/s/${shortcut.name}`}
target="_blank"
>
<Icon.ArrowUpRight className="w-4 h-auto text-gray-400 shrink-0" />
</Link>
{showActions && (
<div className="ml-1 flex flex-row justify-end items-center shrink-0">
<ShortcutActionsDropdown shortcut={shortcut} />
</div>
)}
</div>
);
};