You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
tailchat/web/src/components/modals/SettingsView/About.tsx

93 lines
2.7 KiB
TypeScript

import { Typography } from 'antd';
import React from 'react';
import { version } from 'tailchat-shared';
import logoUrl from '@assets/images/logo.svg';
import { Icon } from '@iconify/react';
const { Paragraph, Text, Link } = Typography;
const LogoLink: React.FC<{
src: string;
icon: React.ReactNode | string;
}> = React.memo((props) => {
const { src, icon } = props;
return (
<a
className="p-2.5 hover:bg-black hover:bg-opacity-20 rounded"
href={src}
target="_blank"
rel="noreferrer"
>
{typeof icon === 'string' ? <Icon icon={icon} /> : icon}
</a>
);
});
LogoLink.displayName = 'LogoLink';
export const SettingsAbout: React.FC = React.memo(() => {
return (
<div className="select-text">
<img
className="float-right select-none bg-black rounded-2xl bg-opacity-40 p-2"
width={128}
height={128}
src={logoUrl}
/>
<Paragraph>
<Text className="font-bold">TailChat</Text>
<Text>: </Text>
</Paragraph>
<Paragraph></Paragraph>
<Paragraph></Paragraph>
<Paragraph>
<div>():</div>
<ul className="list-disc list-inside">
<li>, </li>
<li>, </li>
<li>使</li>
</ul>
</Paragraph>
<Paragraph>: {version}</Paragraph>
<div className="text-8xl flex flex-wrap space-x-4 bg-black p-4 rounded-md bg-opacity-20">
<LogoLink
src="https://github.com/msgbyte/tailchat"
icon="logos:github-octocat"
/>
<LogoLink
src="https://en.wikipedia.org/wiki/Open_source"
icon="logos:opensource"
/>
<LogoLink src="https://www.docker.com/" icon="logos:docker-icon" />
<LogoLink
src="https://ministar.moonrailgun.com/"
icon={
<img
className="w-24 h-24"
src="https://ministar.moonrailgun.com/img/logo.svg"
/>
}
/>
<LogoLink src="https://zh-hans.reactjs.org/" icon="logos:react" />
<LogoLink src="https://redux.js.org/" icon="logos:redux" />
<LogoLink
src="https://www.typescriptlang.org/"
icon="logos:typescript-icon"
/>
</div>
<Paragraph className="mt-4">
:{' '}
<Link href="https://github.com/msgbyte/tailchat" target="_blank">
https://github.com/msgbyte/tailchat
</Link>
</Paragraph>
</div>
);
});
SettingsAbout.displayName = 'SettingsAbout';