feat: a simple about page

2 files changed, 96 insertions, 0 deletions

diff --git a/src/components/about/About.module.css b/src/components/about/About.module.css
new file mode 100644
index 0000000..632b3ee
--- /dev/null
+++ b/src/components/about/About.module.css
@@ -0,0 +1,18 @@
+.root {
+  padding: 6px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
+}
+
+.mono {
+  font-family: var(--font-mono);
+}
+
+.link {
+  color: var(--color-text-secondary);
+  display: inline-flex;
+}
+.link:hover {
+  color: var(--color-text-highlight);
+}
diff --git a/src/components/about/About.tsx b/src/components/about/About.tsx
new file mode 100644
index 0000000..7648934
--- /dev/null
+++ b/src/components/about/About.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { GitHub } from 'react-feather';
+import { useQuery } from 'react-query';
+import { fetchVersion } from 'src/api/version';
+import ContentHeader from 'src/components/ContentHeader';
+import { connect } from 'src/components/StateProvider';
+import { getClashAPIConfig } from 'src/store/app';
+import { ClashAPIConfig } from 'src/types';
+
+import s from './About.module.css';
+
+type Props = { apiConfig: ClashAPIConfig };
+
+function Version({
+  name,
+  link,
+  version,
+}: {
+  name: string;
+  link: string;
+  version: string;
+}) {
+  return (
+    <div className={s.root}>
+      <h2>{name}</h2>
+      <p>
+        <span>Version </span>
+        <span className={s.mono}>{version}</span>
+      </p>
+      <p>
+        <a
+          className={s.link}
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <GitHub size={20} />
+          <span>Source</span>
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function AboutImpl(props: Props) {
+  const { data: version } = useQuery(
+    ['/version', props.apiConfig],
+    fetchVersion,
+    {
+      suspense: true,
+    }
+  );
+  console.log(version);
+
+  return (
+    <>
+      <ContentHeader title="About" />
+      {version ? (
+        <Version
+          name="Clash"
+          version={version.version}
+          link="https://github.com/Dreamacro/clash"
+        />
+      ) : null}
+      <Version
+        name="Yacd"
+        version={__VERSION__}
+        link="https://github.com/haishanh/yacd"
+      />
+    </>
+  );
+}
+
+const mapState = (s) => ({
+  apiConfig: getClashAPIConfig(s),
+});
+
+export const About = connect(mapState)(AboutImpl);