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

chore: update shortcut frame

Browse Source
This commit is contained in:
Steven
2023-11-16 08:05:33 +08:00
parent 3da0e4720e
commit 0a62579814
6 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/web/src/components/CreateCollectionDrawer.tsx
View File

@ -145,7 +145,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
<DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
<ModalClose />
<DialogContent className="max-w-full sm:max-w-sm">
<div className="overflow-y-auto w-full mt-2 px-3">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Name <span className="text-red-600">*</span>
@ -240,7 +240,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
</div>
</DialogContent>
<DialogActions>
<div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
<div className="w-full flex flex-row justify-end items-center px-3 py-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>

4
frontend/web/src/components/CreateShortcutDrawer.tsx
View File

@ -215,7 +215,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
<DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
<ModalClose />
<DialogContent className="max-w-full sm:max-w-sm">
<div className="overflow-y-auto w-full mt-2 px-3">
<div className="overflow-y-auto w-full mt-2 px-3 pb-4">
<div className="w-full flex flex-col justify-start items-start mb-3">
<span className="mb-2">
Name <span className="text-red-600">*</span>
@ -373,7 +373,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
</div>
</DialogContent>
<DialogActions>
<div className="w-full flex flex-row justify-end items-center px-3 pb-4 space-x-2">
<div className="w-full flex flex-row justify-end items-center px-3 py-4 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={onClose}>
{t("common.cancel")}
</Button>

41
frontend/web/src/components/ShortcutFrame.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Divider } from "@mui/joy";
import classNames from "classnames";
import { Link } from "react-router-dom";
import { getFaviconWithGoogleS2 } from "@/helpers/utils";
import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
import Icon from "./Icon";
interface Props {
shortcut: Shortcut;
}
const ShortcutFrame = ({ shortcut }: Props) => {
const favicon = getFaviconWithGoogleS2(shortcut.link);
return (
<div className="w-full h-full flex flex-col justify-center items-center p-8">
<Link
className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 p-6 pb-4 rounded-2xl shadow-xl dark:text-gray-400 hover:opacity-80"
to={`/s/${shortcut.name}`}
target="_blank"
>
<div className={classNames("w-12 h-12 flex justify-center items-center overflow-clip rounded-lg shrink-0")}>
{favicon ? (
<img className="w-full h-auto" src={favicon} decoding="async" loading="lazy" />
) : (
<Icon.Globe2Icon className="w-full h-auto opacity-70" strokeWidth={1} />
)}
</div>
<p className="text-lg font-medium leading-8 mt-2 truncate">{shortcut.title || shortcut.name}</p>
<p className="text-gray-500 truncate">{shortcut.description}</p>
<Divider className="!my-2" />
<p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
<span className="leading-4">Open this site in a new tab</span>
<Icon.ArrowUpRight className="inline-block ml-1 -mt-0.5 w-4 h-auto" />
</p>
</Link>
</div>
);
};
export default ShortcutFrame;