Feature/portal add clicker App view (#2246)

* add clicker app * fix
rooch-network · Jul 22, 2024 · d34ff19 · d34ff19
1 parent 06342d2
commit d34ff19
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 84 deletions.
diff --git a/infra/rooch-portal/public/clicker-app.jpg b/infra/rooch-portal/public/clicker-app.jpg
diff --git a/infra/rooch-portal/src/common/interface.ts b/infra/rooch-portal/src/common/interface.ts
@@ -28,15 +28,6 @@ export interface SidebarProps {
   onClose: () => void
 }
 
-export interface AppItemProps {
-  id: number
-  name: string
-  description: string
-  profileUrl: string
-  logoUrl: string
-  type: string
-}
-
 export interface SftsProps {
   id: number
   sftName: string

diff --git a/infra/rooch-portal/src/pages/apps/apps-layout.tsx b/infra/rooch-portal/src/pages/apps/apps-layout.tsx
@@ -1,84 +1,27 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
 import { useState } from 'react'
-import { AppsItem } from './components/apps-item'
-import { ComingSoon } from '@/components/coming-soon'
+import { AppsItem, AppItemProps } from './components/apps-item'
 import {useTranslation} from 'react-i18next';
 
-interface App {
-  id: number
-  name: string
-  description: string
-  profileUrl: string
-  logoUrl: string
-  type: string
-}
-
-const mockApps: App[] = [
-  // {
-  //   id: 1,
-  //   name: 'App One',
-  //   description: 'Description for App One.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafybeibietdc7lxki2jeggdu5namnyisuujhgej2zsq26nn7orn2cngm6y.png',
-  //   type: 'Tag',
-  // },
-  // {
-  //   id: 2,
-  //   name: 'App Two',
-  //   description: 'Description for App Two.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreib5gpyab5fipyk7mvs3sbbcophl2gwpldoal3mt7hwzxgbu6pdjpq.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafkreifmpi4vszs4zqvm25us2omgpfr6gkxmc7cwvmle6xph6d5axsm4jm.png',
-  //   type: 'Bridge',
-  // },
-  // {
-  //   id: 3,
-  //   name: 'App One',
-  //   description: 'Description for App One.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafybeibietdc7lxki2jeggdu5namnyisuujhgej2zsq26nn7orn2cngm6y.png',
-  //   type: 'Game',
-  // },
-  // {
-  //   id: 4,
-  //   name: 'App One',
-  //   description: 'Description for App One.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafybeibietdc7lxki2jeggdu5namnyisuujhgej2zsq26nn7orn2cngm6y.png',
-  //   type: 'Tag',
-  // },
-  // {
-  //   id: 5,
-  //   name: 'App Two',
-  //   description: 'Description for App Two.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreib5gpyab5fipyk7mvs3sbbcophl2gwpldoal3mt7hwzxgbu6pdjpq.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafkreifmpi4vszs4zqvm25us2omgpfr6gkxmc7cwvmle6xph6d5axsm4jm.png',
-  //   type: 'Bridge',
-  // },
-  // {
-  //   id: 6,
-  //   name: 'App One',
-  //   description: 'Description for App One.',
-  //   profileUrl:
-  //     'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
-  //   logoUrl: 'https://cdn.lxdao.io/bafybeibietdc7lxki2jeggdu5namnyisuujhgej2zsq26nn7orn2cngm6y.png',
-  //   type: 'Game',
-  // },
+const mockApps: AppItemProps[] = [
+  {
+    id: 1,
+    name: 'Rooch Clicker',
+    description: 'Join our Click Challenge! You\'re in for 1,000 RCC!',
+    profileUrl:
+      'https://cdn.lxdao.io/bafkreig3psglqxqiejrcokqwcoucbv4i2nkp4rumqawok2vjvhey5ps63i.png',
+    logoUrl: 'clicker-app.jpg',
+    type: 'Clicker',
+    url: 'https://rooch-clicker.vercel.app'
+  }
 ]
 
 export const AppsLayout = () => {
-  const [apps] = useState<App[]>(mockApps)
+  const [apps] = useState<AppItemProps[]>(mockApps)
   const { t } = useTranslation()
 
   const renderContent = () => {
-    if (apps.length === 0) {
-      return <ComingSoon />
-    }
     return (
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full place-items-center">
         {apps.map((app) => (
@@ -90,6 +33,7 @@ export const AppsLayout = () => {
             profileUrl={app.profileUrl}
             logoUrl={app.logoUrl}
             type={app.type}
+            url={app.url}
           />
         ))}
       </div>

diff --git a/infra/rooch-portal/src/pages/apps/components/apps-item.tsx b/infra/rooch-portal/src/pages/apps/components/apps-item.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) RoochNetwork
 // SPDX-License-Identifier: Apache-2.0
-import { AppItemProps } from '@/common/interface'
+
 import { AspectRatio } from '@/components/ui/aspect-ratio'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
@@ -13,9 +13,19 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { Send } from 'lucide-react'
+import { Separator } from '@/components/ui/separator.tsx'
+
+export interface AppItemProps {
+  id: number
+  name: string
+  description: string
+  profileUrl: string
+  logoUrl: string
+  type: string
+  url: string
+}
 
-export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type }: AppItemProps) => {
+export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type, url }: AppItemProps) => {
   return (
     <Card
       key={id}
@@ -43,23 +53,35 @@ export const AppsItem = ({ id, name, description, profileUrl, logoUrl, type }: A
           </div>
         </div>
       </CardHeader>
+      <div className="w-full">
+        <Separator className="bg-accent dark:bg-accent/75" />
+      </div>
       <CardContent className="p-0">
         <div className="mx-4 border-none rounded-lg overflow-hidden">
           <AspectRatio
             ratio={16 / 9}
             className="flex items-center justify-center overflow-hidden cursor-pointer"
           >
-            <img src={logoUrl} alt="NFT" className="rounded-md object-cover transition-all" />
+            <img src={logoUrl} alt="Website" className="rounded-md object-cover transition-all" />
+
+            {/*<iframe*/}
+            {/*  src={'https://rooch-clicker-five.vercel.app'}*/}
+            {/*  title="Website Preview"*/}
+            {/*  className="w-full h-full"*/}
+            {/*  style={{ border: 'none', transform: 'scale(1)' }}*/}
+            {/*  scrolling="no"*/}
+            {/*></iframe>*/}
           </AspectRatio>
         </div>
       </CardContent>
       <CardFooter className="p-4">
+        <a href={url} className="w-full" target="_blank" rel="noopener noreferrer">
         <Button variant="default" size="default" className="w-full">
           <div className="flex items-center justify-center gap-x-2">
-            <Send className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all" />
             {type}
           </div>
         </Button>
+        </a>
       </CardFooter>
     </Card>
   )