diff --git a/public/assets/images/search-room-background-image.svg b/public/assets/images/search-room-background-image-desktop.svg
similarity index 100%
rename from public/assets/images/search-room-background-image.svg
rename to public/assets/images/search-room-background-image-desktop.svg
diff --git a/public/assets/images/search-room-background-image-mobile.svg b/public/assets/images/search-room-background-image-mobile.svg
new file mode 100644
index 0000000..c878dae
--- /dev/null
+++ b/public/assets/images/search-room-background-image-mobile.svg
@@ -0,0 +1,76 @@
+
diff --git a/src/modules/landingPage/Status.tsx b/src/modules/landingPage/Status.tsx
index 45a1dc9..e240e22 100644
--- a/src/modules/landingPage/Status.tsx
+++ b/src/modules/landingPage/Status.tsx
@@ -1,5 +1,5 @@
-import { Flex, SimpleGrid, Text } from '@chakra-ui/react';
-import { FaCaretUp } from 'react-icons/fa';
+import { Flex, Icon, SimpleGrid, Text } from '@chakra-ui/react';
+import { FaCaretUp as UpIcon } from 'react-icons/fa';
type ItemProps = {
title: string;
@@ -10,18 +10,20 @@ type ItemProps = {
function Item({ title, value, percentage }: ItemProps) {
return (
-
+
{title}
-
-
+
+
{value}
{percentage > 0 && (
-
+
{/* just for marketing purpose, hide the red percentage */}
- {/* {percentage < 0 && } */}
- {percentage > 0 && }
+ {/* {percentage < 0 && } */}
+ {percentage > 0 && (
+
+ )}
{percentage}%
@@ -40,7 +42,7 @@ const items = [
},
{
title: 'Room Created',
- value: '165K',
+ value: '165K+',
percentage: -28,
},
{
@@ -55,22 +57,23 @@ function Status() {
-
+
Monthly Bot Status
diff --git a/src/modules/room/RoomSearchContainer.tsx b/src/modules/room/RoomSearchContainer.tsx
index 084b065..b47b2ee 100644
--- a/src/modules/room/RoomSearchContainer.tsx
+++ b/src/modules/room/RoomSearchContainer.tsx
@@ -15,7 +15,7 @@ import {
} from '@chakra-ui/react';
import { Trans, useTranslation } from 'next-i18next';
import getConfig from 'next/config';
-import { useEffect, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
import { IoSearch as SearchIcon } from 'react-icons/io5';
import { LuMoveLeft as BackIcon } from 'react-icons/lu';
import { useInView } from 'react-intersection-observer';
@@ -62,7 +62,14 @@ export function RoomSearchContainer() {
]);
return (
-
+
@@ -117,11 +124,19 @@ export function RoomSearchContainer() {
searchRoomQuery.data?.pages &&
searchRoomQuery.data.pages.length > 0 && (
- {searchRoomQuery.data.pages.map((page) =>
+ {searchRoomQuery.data.pages.map((page, idx) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ {page.rooms.map((room) => (
+
+ ))}
+
+ ))}
+ {/* {searchRoomQuery.data.pages.map((page) =>
page.rooms.map((room) => (
)),
- )}
+ )} */}
)}
diff --git a/src/uikit/Layout.tsx b/src/uikit/Layout.tsx
index 61db2c2..2aa8483 100644
--- a/src/uikit/Layout.tsx
+++ b/src/uikit/Layout.tsx
@@ -1,4 +1,5 @@
import { Box, Flex } from '@chakra-ui/react';
+import type { BoxProps } from '@chakra-ui/react';
import type { ReactNode } from 'react';
import { informations } from '@/config/config';
@@ -9,16 +10,18 @@ import { Header } from './Header';
type LayoutProps = {
children: ReactNode;
bgImage?: string;
+ containerProps?: BoxProps;
};
-export function Layout({ children, bgImage }: LayoutProps) {
+export function Layout({ children, bgImage, containerProps }: LayoutProps) {
return (
+ backgroundPosition='top'
+ {...containerProps}>