Initial commit

web/app/components/base/app-icon/index.tsx

@@ -0,0 +1,38 @@
+import type { FC } from 'react'
+import classNames from 'classnames'
+import style from './style.module.css'
+
+export type AppIconProps = {
+  size?: 'tiny' | 'small' | 'medium' | 'large'
+  rounded?: boolean
+  icon?: string
+  background?: string
+  className?: string
+  innerIcon?: React.ReactNode
+}
+
+const AppIcon: FC<AppIconProps> = ({
+  size = 'medium',
+  rounded = false,
+  background,
+  className,
+  innerIcon,
+}) => {
+  return (
+    <span
+      className={classNames(
+        style.appIcon,
+        size !== 'medium' && style[size],
+        rounded && style.rounded,
+        className ?? '',
+      )}
+      style={{
+        background,
+      }}
+    >
+      {innerIcon ? innerIcon : <>🤖</>}
+    </span>
+  )
+}
+
+export default AppIcon

web/app/components/base/app-icon/style.module.css

@@ -0,0 +1,15 @@
+.appIcon {
+  @apply flex items-center justify-center relative w-9 h-9 text-lg bg-teal-100 rounded-lg grow-0 shrink-0;
+}
+.appIcon.large {
+  @apply w-10 h-10;
+}
+.appIcon.small {
+  @apply w-8 h-8;
+}
+.appIcon.tiny {
+  @apply w-6 h-6 text-base;
+}
+.appIcon.rounded {
+  @apply rounded-full;
+}