v7.2.2

Kwenta · Jun 9, 2023 · f7414cb · f7414cb · vercel · Jun 9, 2023
2 parents 01af003 + 3ba32eb
commit f7414cb
Show file tree

Hide file tree

Showing 22 changed files with 587 additions and 231 deletions.
diff --git a/components/ChatRoom/ChatRoom.tsx b/components/ChatRoom/ChatRoom.tsx
@@ -0,0 +1,40 @@
+import Widgetbot from '@widgetbot/react-embed';
+import { useState } from 'react';
+
+import { Body } from 'components/Text';
+
+export default function ChatRoom() {
+	const [showChat, setShowChat] = useState(false);
+	return (
+		<>
+			<a
+				href="#"
+				onClick={(e) => {
+					e.preventDefault();
+					setShowChat(!showChat);
+				}}
+			>
+				<Body color="secondary" style={{ marginRight: '18px' }}>
+					Chat
+				</Body>
+			</a>
+
+			{showChat && (
+				<Widgetbot
+					server="852273007370960937"
+					channel="852528616533000213"
+					shard="https://emerald.widgetbot.io"
+					width={500}
+					height={400}
+					style={{
+						position: 'absolute',
+						bottom: 0,
+						right: 0,
+						marginBottom: '50px',
+						marginRight: '50px',
+					}}
+				/>
+			)}
+		</>
+	);
+}
diff --git a/components/Media/Media.tsx b/components/Media/Media.tsx
@@ -1,27 +1,40 @@
+import dynamic from 'next/dynamic';
 import { FC, ReactNode, memo } from 'react';
 
-import { Media } from 'styles/media';
+import { BREAKPOINTS } from 'styles/media';
 
 type MediaProps = {
 	children: ReactNode;
 };
 
+const MediaQuery = dynamic(() => import('react-responsive'), {
+	ssr: false,
+});
+
 export const DesktopOnlyView: FC<MediaProps> = memo(({ children }) => (
-	<Media greaterThanOrEqual="md">{children}</Media>
+	<MediaQuery minWidth={BREAKPOINTS.md}>{children}</MediaQuery>
 ));
 
 export const TabletOnlyView: FC<MediaProps> = memo(({ children }) => (
-	<Media between={['sm', 'md']}>{children}</Media>
+	<MediaQuery minWidth={BREAKPOINTS.sm} maxWidth={BREAKPOINTS.md - 1}>
+		{children}
+	</MediaQuery>
 ));
 
 export const MobileOrTabletView: FC<MediaProps> = memo(({ children }) => (
-	<Media lessThan="md">{children}</Media>
+	<MediaQuery maxWidth={BREAKPOINTS.md - 1}>{children}</MediaQuery>
 ));
 
 export const MobileHiddenView: FC<MediaProps> = memo(({ children }) => (
-	<Media greaterThan="xs">{children}</Media>
+	<MediaQuery minWidth={BREAKPOINTS.sm}>{children}</MediaQuery>
 ));
 
 export const MobileOnlyView: FC<MediaProps> = memo(({ children }) => (
-	<Media at="xs">{children}</Media>
+	<MediaQuery minWidth={BREAKPOINTS.xs} maxWidth={BREAKPOINTS.sm - 1}>
+		{children}
+	</MediaQuery>
+));
+
+export const NotMobileView: FC<MediaProps> = memo(({ children }) => (
+	<MediaQuery minWidth={BREAKPOINTS.sm}>{children}</MediaQuery>
 ));