From 6fdb1ee902dee0bb1670670be4a063b467f266a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=87=91=E4=BC=9F=E5=BC=BA?= <iamjoel007@gmail.com>
Date: Tue, 16 May 2023 10:42:27 +0800
Subject: [PATCH] feat: explore app list ui

---
 web/app/(commonLayout)/explore/apps/page.tsx  | 31 ++++++++++++++--
 web/app/components/explore/app-card/index.tsx | 35 +++++++++++++++++++
 .../explore/app-card/style.moudle.css         |  0
 3 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/explore/app-card/index.tsx
 create mode 100644 web/app/components/explore/app-card/style.moudle.css

diff --git a/web/app/(commonLayout)/explore/apps/page.tsx b/web/app/(commonLayout)/explore/apps/page.tsx
index fd776cf638..883df5cf73 100644
--- a/web/app/(commonLayout)/explore/apps/page.tsx
+++ b/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>
   )
 }
diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
new file mode 100644
index 0000000000..1d1f3ac29c
--- /dev/null
+++ b/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
diff --git a/web/app/components/explore/app-card/style.moudle.css b/web/app/components/explore/app-card/style.moudle.css
new file mode 100644
index 0000000000..e69de29bb2