feat(infra): framework

packages/frontend/component/src/ui/error-message/error-message.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import type React from 'react';
+
+import { errorMessage } from './style.css';
+
+export const ErrorMessage = ({
+  children,
+  inline,
+  style,
+  className,
+}: React.PropsWithChildren<{
+  inline?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}>) => {
+  if (inline) {
+    return (
+      <span style={style} className={clsx(className, errorMessage)}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <div style={style} className={clsx(className, errorMessage)}>
+      {children}
+    </div>
+  );
+};

packages/frontend/component/src/ui/error-message/index.ts

@@ -0,0 +1 @@
+export { ErrorMessage } from './error-message';

packages/frontend/component/src/ui/error-message/style.css.ts

@@ -0,0 +1,8 @@
+import { cssVar } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const errorMessage = style({
+  color: cssVar('--affine-error-color'),
+  fontSize: '0.6rem',
+  margin: '4px 8px 2px 2px',
+});