feat(core): add link to template tutorial (#10189)

toeverything · Feb 17, 2025 · f369a8d · f369a8d
1 parent 5721378
commit f369a8d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git a/packages/frontend/core/src/modules/template-doc/view/styles.css.ts b/packages/frontend/core/src/modules/template-doc/view/styles.css.ts
@@ -16,5 +16,28 @@ export const scrollableViewport = style({
   maxHeight: 360,
 });
 export const emptyIcon = style({
+  fontSize: 20,
   color: cssVarV2.icon.primary,
 });
+export const empty = style({
+  pointerEvents: 'none',
+  display: 'flex',
+  gap: 8,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  lineHeight: '20px',
+  padding: 4,
+});
+export const emptyText = style({
+  color: cssVarV2.text.secondary,
+});
+export const link = style({
+  lineHeight: 0,
+  pointerEvents: 'auto',
+  fontSize: 20,
+  color: cssVarV2.icon.primary,
+});
+export const space = style({
+  width: 0,
+  flex: 1,
+});
diff --git a/packages/frontend/core/src/modules/template-doc/view/template-list-menu.tsx b/packages/frontend/core/src/modules/template-doc/view/template-list-menu.tsx
@@ -1,7 +1,13 @@
-import { Menu, MenuItem, type MenuProps, Scrollable } from '@affine/component';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  type MenuProps,
+  Scrollable,
+} from '@affine/component';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { useI18n } from '@affine/i18n';
-import { InformationIcon } from '@blocksuite/icons/rc';
+import { DualLinkIcon, InformationIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useState } from 'react';
 
@@ -47,12 +53,21 @@ const DocItem = ({ doc, onSelect, asLink }: DocItemProps) => {
 const Empty = () => {
   const t = useI18n();
   return (
-    <MenuItem
-      disabled
-      prefixIcon={<InformationIcon className={styles.emptyIcon} />}
-    >
-      {t['com.affine.template-list.empty']()}
-    </MenuItem>
+    <div className={styles.empty}>
+      <InformationIcon className={styles.emptyIcon} />
+      <span className={styles.emptyText}>
+        {t['com.affine.template-list.empty']()}
+      </span>
+      <div className={styles.space} />
+      <a
+        href="https://affine.pro/blog/how-to-use-template"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={styles.link}
+      >
+        <IconButton icon={<DualLinkIcon />} />
+      </a>
+    </div>
   );
 };