feat(core): add draghandle to doc page title (#9079)

fix AF-1846

packages/frontend/component/src/index.ts

@@ -7,6 +7,7 @@ export * from './ui/checkbox';
 export * from './ui/date-picker';
 export * from './ui/divider';
 export * from './ui/dnd';
+export * from './ui/drag-handle';
 export * from './ui/editable';
 export * from './ui/empty';
 export * from './ui/error-message';

packages/frontend/component/src/ui/drag-handle/index.css.ts

@@ -0,0 +1,19 @@
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { style } from '@vanilla-extract/css';
+
+export const root = style({
+  cursor: 'grab',
+  color: cssVarV2.icon.secondary,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const svg = style({
+  borderRadius: 8,
+  selectors: {
+    [`${root}[data-dragging="true"] &, ${root}:hover &`]: {
+      backgroundColor: cssVarV2.layer.background.hoverOverlay,
+    },
+  },
+});

packages/frontend/component/src/ui/drag-handle/index.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import * as styles from './index.css';
+
+export const DragHandle = forwardRef<
+  HTMLDivElement,
+  {
+    className?: string;
+    dragging?: boolean;
+  }
+>(({ className, dragging, ...props }, ref) => {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      data-dragging={dragging}
+      className={clsx(styles.root, className)}
+    >
+      <svg
+        width="10"
+        height="22"
+        viewBox="0 0 10 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={styles.svg}
+      >
+        <circle cx="3" cy="7" r="1" fill="currentColor" />
+        <circle cx="7" cy="7" r="1" fill="currentColor" />
+        <circle cx="3" cy="11" r="1" fill="currentColor" />
+        <circle cx="7" cy="11" r="1" fill="currentColor" />
+        <circle cx="3" cy="15" r="1" fill="currentColor" />
+        <circle cx="7" cy="15" r="1" fill="currentColor" />
+      </svg>
+    </div>
+  );
+});
+
+DragHandle.displayName = 'DragHandle';