feat: explore app list ui

web/app/(commonLayout)/explore/apps/page.tsx

@@ -1,11 +1,36 @@
 import React, { FC } from 'react'
+import AppCard from '@/app/components/explore/app-card'
 
 export interface IAppsProps { }
-
+const list = [
+  {
+    id: 1,
+    name: 'Story Bot',
+    mode: 'chat',
+    model_config: {
+      pre_prompt: 'I need you to play the role of a storyteller, and generate creative and vivid short stories based on the keywords I provide.',
+    }
+  },
+  {
+    id: 2,
+    name: 'Code Translate',
+    mode: 'completion',
+  },
+]
 const Apps: FC<IAppsProps> = ({ }) => {
   return (
-    <div>
-      apps
+    <div className='h-full flex flex-col'>
+      <div className='shrink-0 pt-6 px-12'>
+        <div className='mb-1 text-primary-600 text-xl font-semibold'>Explore Apps by Dify</div>
+        <div className='text-gray-500 text-sm'>Use these template apps instantly or customize your own apps based on the templates.</div>
+      </div>
+      <div className='grow-1 flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
+        <nav className='grid content-start grid-cols-1 gap-4 px-12 pt-8 sm:grid-cols-2 lg:grid-cols-4 grow shrink-0'>
+          {list.map(item => (
+            <AppCard key={item.id} app={item as any} />
+          ))}
+        </nav>
+      </div>
     </div>
   )
 }

web/app/components/explore/app-card/index.tsx

@@ -0,0 +1,35 @@
+'use client'
+import Link from 'next/link'
+// import { useTranslation } from 'react-i18next'
+// import s from './style.module.css'
+import AppModeLabel from '@/app/(commonLayout)/apps/AppModeLabel'
+import type { App } from '@/types/app'
+import AppIcon from '@/app/components/base/app-icon'
+
+export type AppCardProps = {
+  app: App
+}
+
+const AppCard = ({
+  app,
+}: AppCardProps) => {
+
+  return (
+    <>
+      <Link href={`/app/${app.id}/overview`} className='col-span-1 bg-white border-2 border-solid border-transparent rounded-lg shadow-sm min-h-[160px] flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'>
+        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+          <AppIcon size='small' />
+          <div className='relative h-8 text-sm font-medium leading-8 grow'>
+            <div className='absolute top-0 left-0 w-full h-full overflow-hidden text-ellipsis whitespace-nowrap'>{app.name}</div>
+          </div>
+        </div>
+        <div className='mb-3 px-[14px] h-9 text-xs leading-normal text-gray-500 line-clamp-2'>{app.model_config?.pre_prompt}</div>
+        <div className='flex items-center flex-wrap min-h-[42px] px-[14px] pt-2 pb-[10px]'>
+          <AppModeLabel mode={app.mode} />
+        </div>
+      </Link>
+    </>
+  )
+}
+
+export default AppCard