From 8679c69da8b120f9cbd21c42c2a899d49a055298 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Tue, 22 Oct 2024 00:10:19 +0800
Subject: [PATCH] feat: add title bar

---
 .../src/components/pdf-viewer/index.tsx       |  3 +
 .../src/components/pdf-viewer/styles.css.ts   | 33 ++++++++
 .../src/components/pdf-viewer/titlebar.tsx    | 75 +++++++++++++++++++
 .../pages/workspace/attachment/index.tsx      |  2 +-
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 packages/frontend/component/src/components/pdf-viewer/styles.css.ts
 create mode 100644 packages/frontend/component/src/components/pdf-viewer/titlebar.tsx

diff --git a/packages/frontend/component/src/components/pdf-viewer/index.tsx b/packages/frontend/component/src/components/pdf-viewer/index.tsx
index edc511868a62c..a8f5177575d8a 100644
--- a/packages/frontend/component/src/components/pdf-viewer/index.tsx
+++ b/packages/frontend/component/src/components/pdf-viewer/index.tsx
@@ -1,8 +1,11 @@
 import type { ReactElement } from 'react';
 
+import { Titlebar } from './titlebar';
+
 export const PDFViewer = (): ReactElement => {
   return (
     <>
+      <Titlebar id={'0'} name={'AFFiNE'} size={10} ext=".pdf" zoom={100} />
       <div>{'PDF Viewer'}</div>
       <div>{'PDF ...'}</div>
     </>
diff --git a/packages/frontend/component/src/components/pdf-viewer/styles.css.ts b/packages/frontend/component/src/components/pdf-viewer/styles.css.ts
new file mode 100644
index 0000000000000..6228cc21a09ee
--- /dev/null
+++ b/packages/frontend/component/src/components/pdf-viewer/styles.css.ts
@@ -0,0 +1,33 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const titlebar = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: '52px',
+  padding: '10px 0 10px 8px',
+  background: cssVarV2('layer/background/primary'),
+  fontSize: '12px',
+  fontWeight: 400,
+  color: cssVarV2('text/secondary'),
+  borderTopWidth: '0.5px',
+  borderTopStyle: 'solid',
+  borderTopColor: cssVarV2('layer/insideBorder/border'),
+});
+
+export const titlebarChild = style({
+  selectors: {
+    [`${titlebar} > &`]: {
+      display: 'flex',
+      gap: '12px',
+      alignItems: 'center',
+      paddingLeft: '12px',
+      paddingRight: '12px',
+    },
+  },
+});
+
+export const titlebarName = style({
+  display: 'flex',
+});
diff --git a/packages/frontend/component/src/components/pdf-viewer/titlebar.tsx b/packages/frontend/component/src/components/pdf-viewer/titlebar.tsx
new file mode 100644
index 0000000000000..7db36c3c269a9
--- /dev/null
+++ b/packages/frontend/component/src/components/pdf-viewer/titlebar.tsx
@@ -0,0 +1,75 @@
+import {
+  EditIcon,
+  LocalDataIcon,
+  MoreHorizontalIcon,
+  ZoomDownIcon,
+  ZoomUpIcon,
+} from '@blocksuite/icons/rc';
+import { useState } from 'react';
+
+import { IconButton } from '../../ui/button';
+import { Menu, MenuItem } from '../../ui/menu';
+import * as styles from './styles.css';
+
+export interface TitlebarProps {
+  id: string;
+  name: string;
+  ext: string;
+  size: number;
+  zoom: number;
+}
+
+const items = [
+  {
+    name: 'Rename',
+    icon: <EditIcon />,
+    action() {},
+  },
+  {
+    name: 'Download',
+    icon: <LocalDataIcon />,
+    action() {},
+  },
+];
+
+export const MenuItems = () =>
+  items.map(({ name, icon, action }) => (
+    <MenuItem key={name} onClick={action} prefixIcon={icon}>
+      {name}
+    </MenuItem>
+  ));
+
+export const Titlebar = ({ name, ext, size, zoom = 100 }: TitlebarProps) => {
+  const [openMenu, setOpenMenu] = useState(false);
+
+  return (
+    <div className={styles.titlebar}>
+      <div className={styles.titlebarChild}>
+        <div className={styles.titlebarName}>
+          <div>{name}</div>
+          <span>{ext}</span>
+        </div>
+        <div>{size}MB</div>
+        <IconButton icon={<LocalDataIcon />}></IconButton>
+        <Menu
+          items={<MenuItems />}
+          rootOptions={{
+            open: openMenu,
+            onOpenChange: setOpenMenu,
+          }}
+          contentOptions={{
+            side: 'bottom',
+            avoidCollisions: false,
+          }}
+        >
+          <IconButton icon={<MoreHorizontalIcon />}></IconButton>
+        </Menu>
+      </div>
+      <div className={styles.titlebarChild}>
+        <IconButton icon={<ZoomDownIcon />}></IconButton>
+        <div>{zoom}%</div>
+        <IconButton icon={<ZoomUpIcon />}></IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
index b586df4586b5f..ebf87001d8a8f 100644
--- a/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
+++ b/packages/frontend/core/src/desktop/pages/workspace/attachment/index.tsx
@@ -4,8 +4,8 @@ import type { ReactElement } from 'react';
 export const AttachmentPage = (): ReactElement => {
   return (
     <>
-      <div>{'Attachment Viewer'}</div>
       <PDFViewer />
+      <div>{'Attachment Viewer'}</div>
     </>
   );
 };