Feat: new entry point for app creation (#10847)

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

@@ -3,14 +3,15 @@
 import type { FC } from 'react'
 import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
-import style from './style.module.css'
-import classNames from '@/utils/classnames'
+import Image from 'next/image'
+import { cva } from 'class-variance-authority'
 import type { AppIconType } from '@/types/app'
+import classNames from '@/utils/classnames'
 
 init({ data })
 
 export type AppIconProps = {
-  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
+  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large' | 'xl' | 'xxl'
   rounded?: boolean
   iconType?: AppIconType | null
   icon?: string
@@ -20,7 +21,28 @@ export type AppIconProps = {
   innerIcon?: React.ReactNode
   onClick?: () => void
 }
-
+const appIconVariants = cva(
+  'flex items-center justify-center relative text-lg rounded-lg grow-0 shrink-0 overflow-hidden leading-none',
+  {
+    variants: {
+      size: {
+        xs: 'w-4 h-4 text-xs',
+        tiny: 'w-6 h-6 text-base',
+        small: 'w-8 h-8 text-xl',
+        medium: 'w-9 h-9 text-[22px]',
+        large: 'w-10 h-10 text-[24px]',
+        xl: 'w-12 h-12 text-[28px]',
+        xxl: 'w-14 h-14 text-[32px]',
+      },
+      rounded: {
+        true: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+      rounded: false,
+    },
+  })
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
@@ -32,23 +54,15 @@ const AppIcon: FC<AppIconProps> = ({
   innerIcon,
   onClick,
 }) => {
-  const wrapperClassName = classNames(
-    style.appIcon,
-    size !== 'medium' && style[size],
-    rounded && style.rounded,
-    className ?? '',
-    'overflow-hidden',
-  )
-
   const isValidImageIcon = iconType === 'image' && imageUrl
 
   return <span
-    className={wrapperClassName}
+    className={classNames(appIconVariants({ size, rounded }), className)}
     style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
     onClick={onClick}
   >
     {isValidImageIcon
-      ? <img src={imageUrl} className="w-full h-full" alt="app icon" />
+      ? <Image src={imageUrl} className="w-full h-full" alt="app icon" />
       : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
     }
   </span>

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

@@ -1,23 +0,0 @@
-.appIcon {
-  @apply flex items-center justify-center relative w-9 h-9 text-lg 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.xs {
-  @apply w-3 h-3 text-base;
-}
-
-.appIcon.rounded {
-  @apply rounded-full;
-}