chore: update learn more link (#1455)

This commit is contained in:
boojack 2023-04-03 15:38:14 +08:00 committed by GitHub
parent 836e496ee0
commit 9ede3da882
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 18 deletions

View File

@ -5,6 +5,7 @@ import * as api from "@/helpers/api";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import Icon from "./Icon"; import Icon from "./Icon";
import RequiredBadge from "./RequiredBadge"; import RequiredBadge from "./RequiredBadge";
import LearnMore from "./LearnMore";
interface Props extends DialogProps { interface Props extends DialogProps {
storage?: ObjectStorage; storage?: ObjectStorage;
@ -105,14 +106,7 @@ const CreateStorageServiceDialog: React.FC<Props> = (props: Props) => {
<div className="dialog-header-container"> <div className="dialog-header-container">
<p className="title-text"> <p className="title-text">
{isCreating ? "Create storage" : "Update storage"} {isCreating ? "Create storage" : "Update storage"}
<a <LearnMore className="ml-2" url="https://usememos.com/docs/storage" />
className="ml-2 text-sm text-blue-600 hover:opacity-80 hover:underline"
href="https://usememos.com/docs/storage"
target="_blank"
>
Learn more
<Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
</a>
</p> </p>
<button className="btn close-btn" onClick={handleCloseBtnClick}> <button className="btn close-btn" onClick={handleCloseBtnClick}>
<Icon.X /> <Icon.X />

View File

@ -0,0 +1,19 @@
import Icon from "./Icon";
interface Props {
url: string;
className?: string;
}
const LearnMore = (props: Props) => {
const { url, className } = props;
return (
<a className={`${className || ""} text-sm text-blue-600 hover:opacity-80 hover:underline`} href={url} target="_blank">
Learn more
<Icon.ExternalLink className="inline -mt-1 ml-1 w-4 h-auto opacity-80" />
</a>
);
};
export default LearnMore;

View File

@ -1,10 +1,11 @@
import { Button, Input, Typography } from "@mui/joy"; import { Button, Input } from "@mui/joy";
import { useState } from "react"; import { useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useGlobalStore } from "@/store/module"; import { useGlobalStore } from "@/store/module";
import * as api from "@/helpers/api"; import * as api from "@/helpers/api";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import Icon from "./Icon"; import Icon from "./Icon";
import LearnMore from "./LearnMore";
interface Props extends DialogProps { interface Props extends DialogProps {
localStoragePath?: string; localStoragePath?: string;
@ -45,15 +46,13 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
<Icon.X /> <Icon.X />
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container max-w-xs">
<div className="py-2"> <p className="text-sm break-words mb-1">
<Typography className="!mb-1" level="body2"> {"Local storage path is a relative path to your database file."}
Local path <LearnMore className="ml-1" url="https://usememos.com/docs/local-storage" />
</Typography> </p>
<p className="text-sm text-gray-400 break-all">{"It's a relative path to your database file."}</p>
<p className="text-sm text-gray-400 mb-2 break-all">{"e.g. assets/{timestamp}_{filename}"}</p> <p className="text-sm text-gray-400 mb-2 break-all">{"e.g. assets/{timestamp}_{filename}"}</p>
<Input className="mb-2" placeholder="Path" value={path} onChange={(e) => setPath(e.target.value)} fullWidth /> <Input className="mb-2" placeholder="Local storage path" fullWidth value={path} onChange={(e) => setPath(e.target.value)} />
</div>
<div className="mt-2 w-full flex flex-row justify-end items-center space-x-1"> <div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
<Button variant="plain" color="neutral" onClick={handleCloseBtnClick}> <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
Cancel Cancel