feat: responsive ads

src/components/AdMidSectionNarrowOnly.tsx

@@ -0,0 +1,19 @@
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { Ad, AdType } from './Ad';
+
+export function AdMidSectionNarrowOnly(props: FlexProps) {
+  return (
+    <Flex
+      justify="center"
+      py="4"
+      gap="4"
+      display={{
+        initial: 'flex',
+        sm: 'none',
+      }}
+      {...props}
+    >
+      <Ad type={AdType.MediumRectangleHorizontalPurple} />
+    </Flex>
+  );
+}

src/components/AdMidSectionResponsive.tsx

@@ -1,7 +1,7 @@
 import { Flex, FlexProps } from '@radix-ui/themes';
 import { Ad, AdType } from './Ad';
 
-export function MidSectionAd(props: FlexProps) {
+export function AdMidSectionResponsive(props: FlexProps) {
   return (
     <Flex justify="center" py="4" gap="4" {...props}>
       <Ad

src/components/AdMidSectionWideOnly.tsx

@@ -0,0 +1,19 @@
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { Ad, AdType } from './Ad';
+
+export function AdMidSectionWideOnly(props: FlexProps) {
+  return (
+    <Flex
+      justify="center"
+      py="4"
+      gap="4"
+      display={{
+        initial: 'none',
+        sm: 'flex',
+      }}
+      {...props}
+    >
+      <Ad type={AdType.LeaderboardHorizontalPurple} />
+    </Flex>
+  );
+}