feat: add download tips banner (#2151)

packages/component/src/components/affine-banner/browser-warning.tsx

@@ -0,0 +1,32 @@
+import { CloseIcon } from '@blocksuite/icons';
+import type React from 'react';
+
+import {
+  browserWarningStyle,
+  closeButtonStyle,
+  closeIconStyle,
+} from './index.css';
+
+export const BrowserWarning = ({
+  show,
+  onClose,
+  message,
+}: {
+  show: boolean;
+  onClose: () => void;
+  message: React.ReactNode;
+}) => {
+  if (!show) {
+    return null;
+  }
+  return (
+    <div className={browserWarningStyle}>
+      {message}
+      <div className={closeButtonStyle} onClick={onClose}>
+        <CloseIcon className={closeIconStyle} />
+      </div>
+    </div>
+  );
+};
+
+export default BrowserWarning;

packages/component/src/components/affine-banner/download-client.tsx

@@ -0,0 +1,44 @@
+import { AffineLogoSimSBlue1_1Icon, CloseIcon } from '@blocksuite/icons';
+
+import {
+  downloadCloseButtonStyle,
+  downloadMessageStyle,
+  downloadTipContainerStyle,
+  downloadTipIconStyle,
+  downloadTipStyle,
+  linkStyle,
+} from './index.css';
+
+export const DownloadTips = ({ onClose }: { onClose: () => void }) => {
+  return (
+    <div
+      className={downloadTipContainerStyle}
+      data-testid="download-client-tip"
+    >
+      <div className={downloadTipStyle}>
+        <AffineLogoSimSBlue1_1Icon className={downloadTipIconStyle} />
+        <div className={downloadMessageStyle}>
+          Enjoying the demo? &nbsp;
+          <a
+            className={linkStyle}
+            href="https://github.com/toeverything/AFFiNE/releases"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Download the AFFiNE Client
+          </a>
+          &nbsp;for the full experience.
+        </div>
+      </div>
+      <div
+        className={downloadCloseButtonStyle}
+        onClick={onClose}
+        data-testid="download-client-tip-close-button"
+      >
+        <CloseIcon className={downloadTipIconStyle} />
+      </div>
+    </div>
+  );
+};
+
+export default DownloadTips;

packages/component/src/components/affine-banner/index.css.ts

@@ -0,0 +1,87 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+const slideDown = keyframes({
+  '0%': {
+    height: '0px',
+  },
+  '100%': {
+    height: '44px',
+  },
+});
+
+export const browserWarningStyle = style({
+  backgroundColor: 'var(--affine-background-warning-color)',
+  color: 'var(--affine-warning-color)',
+  height: '36px',
+  fontSize: 'var(--affine-font-sm)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+});
+export const closeButtonStyle = style({
+  width: '36px',
+  height: '36px',
+  color: 'var(--affine-icon-color)',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  position: 'absolute',
+  right: '16px',
+});
+export const closeIconStyle = style({
+  width: '15px',
+  height: '15px',
+  position: 'relative',
+  zIndex: 1,
+});
+export const downloadTipContainerStyle = style({
+  backgroundColor: 'var(--affine-primary-color)',
+  color: 'var(--affine-white)',
+  width: '100%',
+  height: '44px',
+  fontSize: 'var(--affine-font-base)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'relative',
+  animation: `${slideDown} .3s ease-in-out forwards`,
+});
+export const downloadTipStyle = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+export const downloadTipIconStyle = style({
+  color: 'var(--affine-white)',
+  width: '24px',
+  height: '24px',
+  fontSize: '24px',
+  position: 'relative',
+  zIndex: 1,
+});
+export const downloadCloseButtonStyle = style({
+  color: 'var(--affine-white)',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  position: 'absolute',
+  right: '24px',
+});
+export const downloadMessageStyle = style({
+  color: 'var(--affine-white)',
+  marginLeft: '8px',
+});
+export const linkStyle = style({
+  color: 'var(--affine-white)',
+  textDecoration: 'underline',
+  ':hover': {
+    textDecoration: 'underline',
+  },
+  ':visited': {
+    color: 'var(--affine-white)',
+    textDecoration: 'underline',
+  },
+});

packages/component/src/components/affine-banner/index.tsx

@@ -0,0 +1,2 @@
+export * from './browser-warning';
+export * from './download-client';

packages/component/src/stories/affine-banner.stories.tsx

@@ -0,0 +1,37 @@
+import type { StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import { BrowserWarning, DownloadTips } from '../components/affine-banner';
+
+export default {
+  title: 'AFFiNE/Banner',
+  component: BrowserWarning,
+};
+
+export const Default: StoryFn = () => {
+  const [closed, setIsClosed] = useState(true);
+  return (
+    <div>
+      <BrowserWarning
+        message={<span>test</span>}
+        show={closed}
+        onClose={() => {
+          setIsClosed(false);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Download: StoryFn = () => {
+  const [, setIsClosed] = useState(true);
+  return (
+    <div>
+      <DownloadTips
+        onClose={() => {
+          setIsClosed(false);
+        }}
+      />
+    </div>
+  );
+};