mirror of
https://github.com/aykhans/slash-e.git
synced 2025-04-26 08:03:08 +00:00
chore: update shortcut card style
This commit is contained in:
Steven
parent
88606e0a0c
commit
70b0645f2e
@ -27,7 +27,8 @@ const CollectionView = (props: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const { sm } = useResponsiveWidth();
|
||||
const navigateTo = useNavigateTo();
|
||||
const currentUser = useUserStore().getCurrentUser();
|
||||
const userStore = useUserStore();
|
||||
const currentUser = userStore.getCurrentUser();
|
||||
const collectionStore = useCollectionStore();
|
||||
const shortcutList = useShortcutStore().getShortcutList();
|
||||
const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
|
||||
@ -71,9 +72,9 @@ const CollectionView = (props: Props) => {
|
||||
</div>
|
||||
<p className="text-sm text-gray-500">{collection.description}</p>
|
||||
</div>
|
||||
<div className="flex flex-row justify-end items-center shrink-0">
|
||||
<div className="flex flex-row justify-end items-center shrink-0 gap-2">
|
||||
<Link className="w-full text-gray-400 cursor-pointer hover:text-gray-500" to={`/c/${collection.name}`} target="_blank">
|
||||
<Icon.Share className="w-4 h-auto mr-2" />
|
||||
<Icon.Share className="w-4 h-auto" />
|
||||
</Link>
|
||||
{showAdminActions && (
|
||||
<Dropdown
|
||||
|
||||
@ -159,7 +159,7 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
|
||||
<Drawer anchor="right" open={true} onClose={onClose}>
|
||||
<DialogTitle>{isCreating ? "Create Collection" : "Edit Collection"}</DialogTitle>
|
||||
<ModalClose />
|
||||
<DialogContent className="max-w-full sm:max-w-sm">
|
||||
<DialogContent className="w-full max-w-full sm:max-w-[24rem]">
|
||||
<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">
|
||||
|
||||
@ -213,7 +213,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
|
||||
<Drawer anchor="right" open={true} onClose={onClose}>
|
||||
<DialogTitle>{isCreating ? "Create Shortcut" : "Edit Shortcut"}</DialogTitle>
|
||||
<ModalClose />
|
||||
<DialogContent className="w-full">
|
||||
<DialogContent className="w-full max-w-full sm:max-w-[24rem]">
|
||||
<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">
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import { Tooltip } from "@mui/joy";
|
||||
import { Avatar, Tooltip } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import copy from "copy-to-clipboard";
|
||||
import { useEffect } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import useUserStore from "@/stores/v1/user";
|
||||
import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
|
||||
import { convertVisibilityFromPb } from "@/utils/visibility";
|
||||
import { absolutifyLink, getFaviconWithGoogleS2 } from "../helpers/utils";
|
||||
@ -19,122 +21,135 @@ interface Props {
|
||||
const ShortcutCard = (props: Props) => {
|
||||
const { shortcut } = props;
|
||||
const { t } = useTranslation();
|
||||
const userStore = useUserStore();
|
||||
const viewStore = useViewStore();
|
||||
const creator = userStore.getUserById(shortcut.creatorId);
|
||||
const shortcutLink = absolutifyLink(`/s/${shortcut.name}`);
|
||||
const favicon = getFaviconWithGoogleS2(shortcut.link);
|
||||
|
||||
useEffect(() => {
|
||||
userStore.getOrFetchUserById(shortcut.creatorId);
|
||||
}, []);
|
||||
|
||||
const handleCopyButtonClick = () => {
|
||||
copy(shortcutLink);
|
||||
toast.success("Shortcut link copied to clipboard.");
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={classNames(
|
||||
"group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
|
||||
)}
|
||||
>
|
||||
<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
|
||||
className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
|
||||
to={`/shortcut/${shortcut.id}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
{favicon ? (
|
||||
<img className="w-full h-auto rounded" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.CircleSlash className="w-full h-auto text-gray-400" />
|
||||
)}
|
||||
</Link>
|
||||
<div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
|
||||
<div className="w-full flex flex-row justify-start items-center">
|
||||
<a
|
||||
className={classNames(
|
||||
"max-w-[calc(100%-36px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
|
||||
)}
|
||||
target="_blank"
|
||||
href={shortcutLink}
|
||||
>
|
||||
<div className="truncate">
|
||||
<span className="dark:text-gray-400">{shortcut.title}</span>
|
||||
{shortcut.title ? (
|
||||
<span className="text-gray-500">({shortcut.name})</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>
|
||||
<Tooltip title="Copy" variant="solid" placement="top" arrow>
|
||||
<button
|
||||
className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
|
||||
onClick={() => handleCopyButtonClick()}
|
||||
>
|
||||
<Icon.Clipboard className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<a
|
||||
className="pl-1 pr-4 w-full text-sm truncate text-gray-400 dark:text-gray-500 hover:underline"
|
||||
href={shortcut.link}
|
||||
target="_blank"
|
||||
>
|
||||
{shortcut.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full pt-2 flex flex-row justify-end items-start">
|
||||
<ShortcutActionsDropdown shortcut={shortcut} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span
|
||||
key={tag}
|
||||
className="max-w-[8rem] truncate text-gray-400 dark:text-gray-500 text-sm leading-4 cursor-pointer hover:opacity-80"
|
||||
onClick={() => viewStore.setFilter({ tag: tag })}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
|
||||
</div>
|
||||
<div className="w-full mt-2 flex gap-2 overflow-x-auto">
|
||||
<Tooltip
|
||||
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
|
||||
variant="solid"
|
||||
placement="top"
|
||||
arrow
|
||||
<div
|
||||
className={classNames(
|
||||
"group px-4 py-3 w-full flex flex-col justify-start items-start border rounded-lg hover:shadow dark:border-zinc-700"
|
||||
)}
|
||||
>
|
||||
<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
|
||||
className={classNames("w-8 h-8 flex justify-center items-center overflow-clip shrink-0")}
|
||||
to={`/shortcut/${shortcut.id}`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
<div
|
||||
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
|
||||
onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
|
||||
>
|
||||
<VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
|
||||
{t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
|
||||
{favicon ? (
|
||||
<img className="w-full h-auto rounded" src={favicon} decoding="async" loading="lazy" />
|
||||
) : (
|
||||
<Icon.CircleSlash className="w-full h-auto text-gray-400" />
|
||||
)}
|
||||
</Link>
|
||||
<div className="ml-1 w-[calc(100%-24px)] flex flex-col justify-start items-start">
|
||||
<div className="w-full flex flex-row justify-start items-center">
|
||||
<a
|
||||
className={classNames(
|
||||
"max-w-[calc(100%-36px)] flex flex-row px-1 mr-1 justify-start items-center cursor-pointer rounded-md hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
|
||||
)}
|
||||
target="_blank"
|
||||
href={shortcutLink}
|
||||
>
|
||||
<div className="truncate">
|
||||
<span className="dark:text-gray-400">{shortcut.title}</span>
|
||||
{shortcut.title ? (
|
||||
<span className="text-gray-500">({shortcut.name})</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>
|
||||
<Tooltip title="Copy" variant="solid" placement="top" arrow>
|
||||
<button
|
||||
className="hidden group-hover:block w-6 h-6 cursor-pointer rounded-md text-gray-500 hover:bg-gray-100 hover:shadow dark:hover:bg-zinc-800"
|
||||
onClick={() => handleCopyButtonClick()}
|
||||
>
|
||||
<Icon.Clipboard className="w-4 h-auto mx-auto" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title="View count" variant="solid" placement="top" arrow>
|
||||
<Link
|
||||
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
|
||||
to={`/shortcut/${shortcut.id}#analytics`}
|
||||
unstable_viewTransition
|
||||
<a
|
||||
className="pl-1 pr-4 w-full text-sm truncate text-gray-400 dark:text-gray-500 hover:underline"
|
||||
href={shortcut.link}
|
||||
target="_blank"
|
||||
>
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
|
||||
{t("shortcut.visits", { count: shortcut.viewCount })}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
{shortcut.link}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-full pt-2 flex flex-row justify-end items-start">
|
||||
<ShortcutActionsDropdown shortcut={shortcut} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="mt-2 w-full flex flex-row justify-start items-start gap-2 truncate">
|
||||
{shortcut.tags.map((tag) => {
|
||||
return (
|
||||
<span
|
||||
key={tag}
|
||||
className="max-w-[8rem] truncate text-gray-400 dark:text-gray-500 text-sm leading-4 cursor-pointer hover:opacity-80"
|
||||
onClick={() => viewStore.setFilter({ tag: tag })}
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{shortcut.tags.length === 0 && <span className="text-gray-400 text-sm leading-4 italic">No tags</span>}
|
||||
</div>
|
||||
<div className="w-full mt-2 flex gap-2 overflow-x-auto">
|
||||
<Tooltip title={creator.nickname} variant="solid" placement="top" arrow>
|
||||
<Avatar
|
||||
className="dark:bg-zinc-800"
|
||||
sx={{
|
||||
"--Avatar-size": "24px",
|
||||
}}
|
||||
alt={creator.nickname.toUpperCase()}
|
||||
></Avatar>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title={t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.description`)}
|
||||
variant="solid"
|
||||
placement="top"
|
||||
arrow
|
||||
>
|
||||
<div
|
||||
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
|
||||
onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
|
||||
>
|
||||
<VisibilityIcon className="w-4 h-auto mr-1 opacity-70" visibility={shortcut.visibility} />
|
||||
{t(`shortcut.visibility.${convertVisibilityFromPb(shortcut.visibility).toLowerCase()}.self`)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip title="View count" variant="solid" placement="top" arrow>
|
||||
<Link
|
||||
className="w-auto leading-5 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap cursor-pointer text-gray-400 text-sm"
|
||||
to={`/shortcut/${shortcut.id}#analytics`}
|
||||
unstable_viewTransition
|
||||
>
|
||||
<Icon.BarChart2 className="w-4 h-auto mr-1 opacity-70" />
|
||||
{t("shortcut.visits", { count: shortcut.viewCount })}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -11,13 +11,13 @@ const SubscriptionFAQ = () => {
|
||||
<Accordion>
|
||||
<AccordionSummary>Can I use the Free plan in my team?</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you can upgrade to the Pro
|
||||
plan.
|
||||
Of course you can. In the free plan, you can invite up to 5 members to your team. If you need more, you should upgrade to the
|
||||
Pro plan.
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion>
|
||||
<AccordionSummary>How many devices can the license key be used on?</AccordionSummary>
|
||||
<AccordionDetails>{`It's unlimited for now, but please don't abuse it.`}</AccordionDetails>
|
||||
<AccordionDetails>{`It's unlimited for now, but please do not abuse it.`}</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion>
|
||||
<AccordionSummary>{`Can I get a refund if Slash doesn't meet my needs?`}</AccordionSummary>
|
||||
|
||||
@ -56,7 +56,7 @@ const SubscriptionSetting: React.FC = () => {
|
||||
<div className="w-full flex justify-between items-center mt-4">
|
||||
<div>
|
||||
{profile.plan === PlanType.FREE && (
|
||||
<Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/d03a2696-8a8b-49c9-9e19-d425e3884fd7" target="_blank">
|
||||
<Link href="https://yourselfhosted.lemonsqueezy.com/checkout/buy/947e9a56-c93a-4294-8d71-2ea4b0f3ec51" target="_blank">
|
||||
Buy a license key
|
||||
<Icon.ExternalLink className="w-4 h-auto ml-1" />
|
||||
</Link>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user