v0.1.0 (#60)

* Updated dockerfile to match new standard * added cd for dev branch (#22) Co-authored-by: Mike de Geofroy <[email protected]> * fixed formatting * Moved api url to env Cleaned up useless console log * Added .env info log * fix(env): pushed env lol * Added gitignore * Added .env values * Updated cd pipelines. Added envs into build * added copy .env * Removed copy dev :) * Update cd-dev.yaml * feat(settings): Updated Settings Page (#32) * Added avatars to settings page * Updated settings page * Remove envs * Comment sandwitch * remove secret * blank * fix(lint): Fixed bad lint problem * feat(cards): Updated the card design (#34) * Added basic card components. * adding opacity on like & dislikes * Added likes and dislikes to cards * fix(android): Updated Cards * feat(end-screen): Added an end screen. (#42) * Updated result interface and added basic markup for result page. * Added card bottom icons. * Added time to cards * fix(lint): fixed lint errors * fixed settings error * Removed unused assets * feat(error): Added error pages and websocket error parsing (#45) * Updated dockerfile to match new standard * added cd for dev branch (#22) * fixed formatting * Moved api url to env Cleaned up useless console log * Added .env info log * fix(env): pushed env lol * Added gitignore * Added .env values * Updated cd pipelines. Added envs into build * added copy .env * Removed copy dev :) * Update cd-dev.yaml * feat(settings): Updated Settings Page (#32) * Added avatars to settings page * Updated settings page * Remove envs * Comment sandwitch * remove secret * blank * fix(lint): Fixed bad lint problem * feat(cards): Updated the card design (#34) * Added basic card components. * adding opacity on like & dislikes * Added likes and dislikes to cards * fix(android): Updated Cards * feat(end-screen): Added an end screen. (#42) * Updated result interface and added basic markup for result page. * Added card bottom icons. * Added time to cards * fix(lint): fixed lint errors * fixed settings error * Removed unused assets --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]> * feat(map): Added map to home screen. (#46) * Added a map on home screen. * Cleaned up comments and logs * fixed lint * fixed errors uncaught by lint * moved share to settings * updated share link * feat(lobby-preview): Added a lobby preview page (#50) * feat(end-screen): Updated end screen. (#43) * Updated dockerfile to match new standard * added cd for dev branch (#22) Co-authored-by: Mike de Geofroy <[email protected]> * fixed formatting * Moved api url to env Cleaned up useless console log * Added .env info log * fix(env): pushed env lol * Added gitignore * Added .env values * Updated cd pipelines. Added envs into build * added copy .env * Removed copy dev :) * Update cd-dev.yaml * feat(settings): Updated Settings Page (#32) * Added avatars to settings page * Updated settings page * Remove envs * Comment sandwitch * remove secret * blank * fix(lint): Fixed bad lint problem * feat(cards): Updated the card design (#34) * Added basic card components. * adding opacity on like & dislikes * Added likes and dislikes to cards * fix(android): Updated Cards * feat(end-screen): Added an end screen. (#42) * Updated result interface and added basic markup for result page. * Added card bottom icons. * Added time to cards * fix(lint): fixed lint errors * fixed settings error * Removed unused assets --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]> * feat(map): Added map to home screen. (#47) * Updated dockerfile to match new standard * added cd for dev branch (#22) Co-authored-by: Mike de Geofroy <[email protected]> * fixed formatting * Moved api url to env Cleaned up useless console log * Added .env info log * fix(env): pushed env lol * Added gitignore * Added .env values * Updated cd pipelines. Added envs into build * added copy .env * Removed copy dev :) * Update cd-dev.yaml * feat(settings): Updated Settings Page (#32) * Added avatars to settings page * Updated settings page * Remove envs * Comment sandwitch * remove secret * blank * fix(lint): Fixed bad lint problem * feat(cards): Updated the card design (#34) * Added basic card components. * adding opacity on like & dislikes * Added likes and dislikes to cards * fix(android): Updated Cards * feat(end-screen): Added an end screen. (#42) * Updated result interface and added basic markup for result page. * Added card bottom icons. * Added time to cards * fix(lint): fixed lint errors * fixed settings error * Removed unused assets * feat(error): Added error pages and websocket error parsing (#45) * Updated dockerfile to match new standard * added cd for dev branch (#22) * fixed formatting * Moved api url to env Cleaned up useless console log * Added .env info log * fix(env): pushed env lol * Added gitignore * Added .env values * Updated cd pipelines. Added envs into build * added copy .env * Removed copy dev :) * Update cd-dev.yaml * feat(settings): Updated Settings Page (#32) * Added avatars to settings page * Updated settings page * Remove envs * Comment sandwitch * remove secret * blank * fix(lint): Fixed bad lint problem * feat(cards): Updated the card design (#34) * Added basic card components. * adding opacity on like & dislikes * Added likes and dislikes to cards * fix(android): Updated Cards * feat(end-screen): Added an end screen. (#42) * Updated result interface and added basic markup for result page. * Added card bottom icons. * Added time to cards * fix(lint): fixed lint errors * fixed settings error * Removed unused assets --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]> * feat(map): Added map to home screen. (#46) * Added a map on home screen. * Cleaned up comments and logs * fixed lint * fixed errors uncaught by lint --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]> * Updated ci/cd pipelines (#48) * Updated tests * Updated cd for prod * fixed ci-tests.yaml error (#49) --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]> * Trigger Build * bad merge * Trigger Build * updated workflow * feat(lobby-preview): Added a lobby preview page (#53) * fix(lint): Fixed lint errors * fix(match): Fixed the match cards (#54) * Fixed images in result & match card * fix(result): Fixed scrolling on result screen & button width. (#55) * Updated imports, added return to home button * fixed scrolling on result page * feat(main-screen): Added a beautiful animated button (#56) * Added a map on home screen. * Cleaned up comments and logs * fixed lint * added a button to main * Fixed some light errors * fixed bad loby logic * slight fix to button * feat(main-screen): Added recent lobbies (#57) * Added a map on home screen. * Cleaned up comments and logs * fixed lint * added a button to main * Fixed some light errors * updated like/dislike icons * updated users & added recent lobbies * fixed lint errors * fixed build errors * multiple fixes to lobby logic * feat(main-screen): Added recent lobbies and refactored map element. (#58) * Started adding more stuff to main screen * fixed error with bad users in local storage * Added multiple fixes and new home screen * updated env variables in gh actions * fix(lint): Fixed uncaught lint errors * Added fallbacks for profile images * hotfix for fallback on map * added a hotfix of the main page --------- Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: Alex Dyakonov <[email protected]> Co-authored-by: vaniog <[email protected]>
shampsdev · Nov 14, 2024 · 66480d8 · 66480d8
1 parent 5e282cb
commit 66480d8
Show file tree

Hide file tree

Showing 30 changed files with 842 additions and 365 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
 VITE_API_URL=https://dev.dishdash.ru
+VITE_BOT_USERNAME=dishdashtunnel_bot
diff --git a/.github/workflows/cd-dev.yaml b/.github/workflows/cd-dev.yaml
@@ -11,7 +11,8 @@ jobs:
 
   push_to_registry:
     name: Development Continuous Deployment
-    if: ${{ github.event.workflow_run.conclusion == 'success' && github.event.workflow_run.head_branch == 'dev' }}
+    needs: ci-tests
+    if: ${{ success() }}
     runs-on: ubuntu-latest
     permissions:
       packages: write
@@ -37,6 +38,7 @@ jobs:
       - name: Create .env file with secrets
         run: |
           echo "VITE_API_URL=${{ secrets.VITE_API_URL_DEV }}" > .env
+          echo "VITE_BOT_USERNAME=${{ secrets.VITE_BOT_USERNAME_DEV }}" >> .env
 
       - name: Build and push Docker image
         id: push
@@ -53,3 +55,4 @@ jobs:
         shell: bash
         run: |
           curl -H "Authorization: Bearer ${{ secrets.WATCHTOWER_HTTP_API_TOKEN }}" ${{ secrets.WATCHTOWER_UPDATE_ENDPOINT_DEV }}
+
diff --git a/.github/workflows/cd-production.yaml b/.github/workflows/cd-production.yaml
@@ -35,6 +35,7 @@ jobs:
       - name: Create .env file with secrets
         run: |
           echo "VITE_API_URL=${{ secrets.VITE_API_URL_PRODUCTION }}" >> .env
+          echo "VITE_BOT_USERNAME=${{ secrets.VITE_BOT_USERNAME }}" >> .env
 
       - name: Build and push Docker image
         id: push

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@vkruglikov/react-telegram-web-app": "^2.1.9",
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
+    "axios-cache-interceptor": "^1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.4",

diff --git a/src/assets/icons/add-person.icon.tsx b/src/assets/icons/add-person.icon.tsx
@@ -0,0 +1,11 @@
+
+export const AddPersonIcon = ({ className }: { className?: string }) => {
+    return (
+        <div className={className}>
+            <svg width="30" height="23" viewBox="0 0 30 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" clipRule="evenodd" d="M18.9827 3.14128C16.84 3.14128 15.1708 4.80666 15.1708 6.77874C15.1708 8.75082 16.84 10.4162 18.9827 10.4162C21.1255 10.4162 22.7946 8.75082 22.7946 6.77874C22.7946 4.80666 21.1255 3.14128 18.9827 3.14128ZM12.9944 6.77874C12.9944 3.53098 15.713 0.964844 18.9827 0.964844C22.2525 0.964844 24.971 3.53098 24.971 6.77874C24.971 10.0265 22.2525 12.5926 18.9827 12.5926C15.713 12.5926 12.9944 10.0265 12.9944 6.77874ZM5.50744 5.69053C6.10844 5.69053 6.59565 6.17774 6.59565 6.77874V9.23479H9.18252C9.78352 9.23479 10.2707 9.722 10.2707 10.323C10.2707 10.924 9.78352 11.4112 9.18252 11.4112H6.59565V13.8673C6.59565 14.4683 6.10844 14.9555 5.50744 14.9555C4.90643 14.9555 4.41922 14.4683 4.41922 13.8673V11.4112H1.83236C1.23135 11.4112 0.744141 10.924 0.744141 10.323C0.744141 9.722 1.23135 9.23479 1.83236 9.23479H4.41922V6.77874C4.41922 6.17774 4.90643 5.69053 5.50744 5.69053ZM18.9827 16.7276C12.6456 16.7276 11.0206 20.278 10.8774 21.6587C10.8155 22.2565 10.2806 22.6909 9.68279 22.6289C9.08499 22.5669 8.65063 22.0321 8.71262 21.4343C8.97779 18.8769 11.5996 14.5512 18.9827 14.5512C26.3659 14.5512 28.9877 18.8769 29.2528 21.4343C29.3148 22.0321 28.8805 22.5669 28.2827 22.6289C27.6849 22.6909 27.15 22.2565 27.088 21.6587C26.9448 20.278 25.3199 16.7276 18.9827 16.7276Z" fill="currentColor" />
+            </svg>
+        </div>
+    )
+}
+
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -1,12 +1,44 @@
-import { CSSProperties } from "react";
+import { motion } from "framer-motion";
+import { CSSProperties, ReactElement, useRef, useState } from "react";
 
 interface AvatarProps {
     src: string;
+    fallback: string;
+    fallbackElement?: ReactElement;
     style: CSSProperties;
 }
 
-export const Avatar = ({ src, style }: AvatarProps) => {
-    return <div style={style} className="w-[30px] rounded-full border-[3px] border-secondary overflow-hidden">
-        <img className="w-full object-cover" src={src} />
-    </div>
-}
+export const Avatar = ({ src, fallback, style, fallbackElement }: AvatarProps) => {
+    const [imageError, setImageError] = useState(false);
+    const imgRef = useRef<HTMLImageElement | null>(null)
+
+    const handleImgValidity = () => {
+        if (imgRef.current && imgRef.current.naturalHeight < 10) {
+            // setImageError(true);
+        } else {
+            setImageError(false);
+        }
+    }
+
+    return (
+        <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            style={style}
+            className="max-h-[30px] w-full aspect-square bg-background rounded-full border-[3px] border-secondary overflow-hidden flex items-center justify-center"
+        >
+            {!imageError ? (
+                <img
+                    ref={imgRef}
+                    onLoad={handleImgValidity}
+                    className="w-full h-full object-cover"
+                    src={src}
+                    onError={() => setImageError(true)}
+                />
+            ) : (
+                fallbackElement !== undefined ? fallbackElement : <span className="text-primary font-medium text-xs">{fallback}</span>
+            )}
+        </motion.div>
+    );
+};
+
diff --git a/src/components/ui/game.tsx b/src/components/ui/game.tsx
@@ -2,7 +2,6 @@ import { motion, AnimatePresence, cubicBezier } from 'framer-motion';
 import Loader from '@/components/ui/loader';
 import { useLoadingStore } from '@/shared/stores/loading.store';
 import { Outlet } from 'react-router-dom';
-import { Toaster } from 'react-hot-toast';
 
 const gameScreenVariants = {
   initial: {
@@ -37,11 +36,6 @@ export const GameComponent = () => {
 
   return (
     <main className="h-screen mx-auto bg-background">
-      <Toaster
-        toastOptions={{
-          className: '!bg-secondary !text-foreground !rounded-xl !w-full',
-        }}
-      />
       <AnimatePresence>
         {isLoading ? (
           <motion.div

diff --git a/src/modules/game/card.tsx b/src/modules/game/card.tsx
@@ -20,8 +20,8 @@ export const CardComponent = ({ data, deltaY }: Props) => {
 
     const { openLink } = useWebApp();
 
-    const leftOpacity = deltaY ? useTransform(deltaY, [-15, 0, 15], [0, 0, 1]) : 0; 
-    const rightOpacity = deltaY ? useTransform(deltaY, [-15, 0, 15], [1, 0, 0]) : 0;
+    const leftOpacity = deltaY ? useTransform(deltaY, [-5, 0, 5], [0, 0, 1]) : 0;
+    const rightOpacity = deltaY ? useTransform(deltaY, [-5, 0, 5], [1, 0, 0]) : 0;
 
     const { disableVerticalSwipes, enableVerticalSwipes } = useWebApp();
     useEffect(() => {
@@ -74,7 +74,7 @@ export const CardComponent = ({ data, deltaY }: Props) => {
                     onDrag={handleDrag}
                 >
                     <div className="h-1 bg-muted-foreground mb-1 rounded-full mx-auto w-14"></div>
-                    <h1 className="text-white text-lg font-medium mx-4">{data.title}</h1>
+                    <h1 className="text-foreground text-lg font-medium mx-4">{data.title}</h1>
                     <p className="px-4 text-muted-foreground">{data.tags.map(el => el.name).join(", ")}</p>
                     <div className="w-full grid grid-cols-2 gap-4 px-4 pt-3">
                         <div className="bg-background font-medium text-center py-1 rounded-xl">

diff --git a/src/modules/game/match.card.tsx b/src/modules/game/match.card.tsx
@@ -1,57 +1,82 @@
 import { useMatchStore } from '@/shared/stores/match.store';
 import { matchEvent } from '@/shared/events/app-events/match.event';
-import { CardComponent } from './card';
 import { useWebApp } from '@vkruglikov/react-telegram-web-app';
 import { useEffect } from 'react';
 
 const MatchCard = () => {
-  const { card } = useMatchStore();
+    const { card } = useMatchStore();
 
-  const webApp = useWebApp();
+    const webApp = useWebApp();
+    const { openLink } = webApp;
 
-  const voteFinish = () => {
-    matchEvent.vote(card?.id ?? 0, 1);
-  };
+    const voteFinish = () => {
+        matchEvent.vote(card?.id ?? 0, 1);
+    };
 
-  const voteContinue = () => {
-    matchEvent.vote(card?.id ?? 0, 0);
-  };
+    const voteContinue = () => {
+        matchEvent.vote(card?.id ?? 0, 0);
+    };
 
-  // SecondaryButton слишком новая фича, либа ещё не имплементировала, надо будет сделать)
-  useEffect(() => {
-    webApp.MainButton.setText('Продолжить');
-    webApp.MainButton.show();
-    webApp.MainButton.enable();
-    webApp.MainButton.onClick(voteContinue);
+    // SecondaryButton слишком новая фича, либа ещё не имплементировала, надо будет сделать)
+    useEffect(() => {
+        webApp.MainButton.setText('Продолжить');
+        webApp.MainButton.show();
+        webApp.MainButton.enable();
+        webApp.MainButton.onClick(voteContinue);
 
-    webApp.SecondaryButton.setText('Закончить');
-    webApp.SecondaryButton.show();
-    webApp.SecondaryButton.enable();
-    webApp.SecondaryButton.onClick(voteFinish);
+        webApp.SecondaryButton.setText('Закончить');
+        webApp.SecondaryButton.show();
+        webApp.SecondaryButton.enable();
+        webApp.SecondaryButton.onClick(voteFinish);
 
-    return () => {
-      webApp.MainButton.hide();
-      webApp.MainButton.offClick(voteContinue);
+        return () => {
+            webApp.MainButton.hide();
+            webApp.MainButton.offClick(voteContinue);
 
-      webApp.SecondaryButton.hide();
-      webApp.SecondaryButton.offClick(voteFinish);
-    };
-  }, [webApp]);
+            webApp.SecondaryButton.hide();
+            webApp.SecondaryButton.offClick(voteFinish);
+        };
+    }, [webApp]);
 
-  return (
-    <div
-      className="flex h-screen flex-col justify-center items-center overflow-hidden  ${
+    return (
+        <div
+            className="flex h-screen flex-col justify-center items-center overflow-hidden  ${
       isDragging"
-    >
-      <div className="text-3xl py-5">Это метч!</div>
-      <div
-        id="cardsWrapper"
-        className="aspect-[100/150] w-full max-w-[320px] xs:max-w-[420px] relative z-10"
-      >
-        {card && <CardComponent data={card} />}
-      </div>
-    </div>
-  );
+        >
+            <div className="text-3xl py-5">Это метч!</div>
+            <div
+                id="cardsWrapper"
+                className="w-full aspect-[30/35] max-w-[90vw] relative z-10"
+            >
+                <div className="relative h-full">
+                    <div className="h-[380px] w-full">
+                        <div className="bg-slate-100 h-full w-full rounded-t-3xl overflow-hidden">
+                            <img
+                                draggable="false"
+                                className="h-full w-auto min-w-full object-cover"
+                                src={card?.image}
+                            />
+                        </div>
+                    </div>
+                    <div className="absolute top-0 w-full h-full">
+                        <div
+                            className="absolute pt-4 bottom-0 w-full rounded-3xl bg-secondary shadow-md overflow-hidden"
+                        >
+                            <h1 className="text-white text-lg font-medium mx-4">{card?.title}</h1>
+                            <div className="h-full">
+                                <p onClick={() => {
+                                    const url = `https://yandex.ru/maps/?rtext=${card?.location.lat}%2C${card?.location.lon}`
+                                    openLink(url);
+                                }} className="p-4 pt-0 cursor-pointer underline flex flex-col justify-between overflow-hidden text-foreground">
+                                    {card?.address}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div >
+            </div>
+        </div>
+    );
 };
 
 export default MatchCard;
diff --git a/src/modules/game/result.card.tsx b/src/modules/game/result.card.tsx
@@ -10,9 +10,9 @@ export const ResultCard = (data: { card: Card }) => {
 
     return (
         <div className="bg-secondary flex justify-between gap-5 rounded-xl h-36 p-4 w-full">
-            <div className="flex flex-col justify-between">
+            <div className="flex w-full flex-col justify-between">
                 <div>
-                    <p className="text-muted">
+                    <p className="text-foreground-muted line-clamp-1">
                         {data.card.tags.map(el => el.name).join(", ")}
                     </p>
                     <p className="font-medium line-clamp-1">{data.card.title}</p>
@@ -30,7 +30,7 @@ export const ResultCard = (data: { card: Card }) => {
                     </div>
                 </div>
             </div>
-            <img className="h-full aspect-square rounded-lg" src={data.card.image} />
+            <img className="h-full aspect-square rounded-lg object-cover" src={data.card.image} />
         </div>
     )
 }
diff --git a/src/modules/home/lobby.card.tsx b/src/modules/home/lobby.card.tsx
@@ -0,0 +1,77 @@
+import { Lobby, fetchLobby } from "@/shared/api/lobby.api";
+import { useLobbyStore } from "@/shared/stores/lobby.store";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Users } from "../settings/users";
+import { Tag } from "@/shared/types/tag.interface";
+
+interface LobbyCardProps {
+    id: string;
+}
+
+export const LobbyCard = ({ id }: LobbyCardProps) => {
+    const navigate = useNavigate();
+    const { resetStore } = useLobbyStore();
+    const [lobby, setLobby] = useState<Lobby | null>(null);
+
+    useEffect(() => {
+        fetchLobby(id).then(lobby => setLobby(lobby ?? null));
+    }, [])
+
+    const getDiff = (time: Date): string => {
+        const now = new Date();
+        const diffMs = now.getTime() - time.getTime();
+
+        const seconds = Math.floor(diffMs / 1000);
+        const minutes = Math.floor(seconds / 60);
+        const hours = Math.floor(minutes / 60);
+        const days = Math.floor(hours / 24);
+        const weeks = Math.floor(days / 7);
+        const months = Math.floor(days / 30);
+        const years = Math.floor(days / 365);
+
+        const pluralize = (value: number, words: [string, string, string]): string => {
+            if (value % 10 === 1 && value % 100 !== 11) return words[0];
+            if (value % 10 >= 2 && value % 10 <= 4 && (value % 100 < 10 || value % 100 >= 20)) return words[1];
+            return words[2];
+        };
+
+        if (years > 0) return `${years} ${pluralize(years, ['год', 'года', 'лет'])} назад`;
+        if (months > 0) return `${months} ${pluralize(months, ['месяц', 'месяца', 'месяцев'])} назад`;
+        if (weeks > 0) return `${weeks} ${pluralize(weeks, ['неделя', 'недели', 'недель'])} назад`;
+        if (days > 0) return `${days} ${pluralize(days, ['день', 'дня', 'дней'])} назад`;
+        if (hours > 0) return `${hours} ${pluralize(hours, ['час', 'часа', 'часов'])} назад`;
+        if (minutes > 0) return `${minutes} ${pluralize(minutes, ['минута', 'минуты', 'минут'])} назад`;
+        if (seconds > 0) return `${seconds} ${pluralize(seconds, ['секунда', 'секунды', 'секунд'])} назад`;
+
+        return 'только что';
+    };
+
+    const getLobbyCategories = (tags: Tag[]) => {
+        return tags.length > 0 ? tags.flatMap(x => x.name).join(', ').toLowerCase() : 'Без тегов';
+    }
+
+    return (
+        <div
+            onClick={() => {
+                navigate(`/${id}`)
+                resetStore();
+            }}
+            className={`${lobby ? '' : 'animate-pulse'} cursor-pointer h-[90px] mx-auto p-3 px-4 flex pointer-events-auto w-full bg-secondary rounded-xl`} >
+            {lobby && (<>
+                <div className="w-full space-y-2">
+                    <div className="line-clamp-1">
+                        <p className="first-letter:capitalize">
+                            {getLobbyCategories(lobby?.tags ?? [])}
+                        </p>
+                    </div>
+                    <p className="text-primary w-fit px-4 font-medium py-1 bg-background rounded-xl">{getDiff(new Date(lobby?.createdAt ?? ''))}</p>
+                </div>
+                <div className="w-fit h-6">
+                    <Users users={lobby?.users ?? []} />
+                </div>
+            </>)
+            }
+        </div >
+    )
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		VITE_API_URL=https://dev.dishdash.ru
		VITE_BOT_USERNAME=dishdashtunnel_bot