feat: weekly tech-news quiz (arcade leaderboard game)

packages/shared/src/components/MainFeedLayout.tsx

@@ -24,6 +24,7 @@ import { useFeeds } from '../hooks/feed/useFeeds';
 import { WebappShortcutsRow } from '../features/shortcuts/components/WebappShortcutsRow';
 import { LiveStandupsStrip } from './liveRooms/LiveStandupsStrip';
 import { AskSearchBanner } from './marketing/banners/AskSearchBanner';
+import { WeeklyQuizBanner } from '../features/weeklyQuiz/components/WeeklyQuizBanner';
 import { FeedEngagementBanner } from './brand/FeedEngagementBanner';
 import FeedContext from '../contexts/FeedContext';
 import feedStyles from './Feed.module.css';
@@ -803,6 +804,7 @@ export default function MainFeedLayout({
         >
           <FeedEngagementBanner className="mb-3" />
         </div>
+        {isHomePage && <WeeklyQuizBanner className="mx-4 mb-4 laptop:mx-0" />}
         {isHomePage && (
           <LiveStandupsStrip className="mx-0 mb-3 tablet:mx-2 laptop:mx-0" />
         )}

packages/shared/src/components/icons/Swords/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const SwordsIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/VolumeLow/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const VolumeLowIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);

packages/shared/src/components/icons/index.ts

@@ -178,7 +178,9 @@ export * from './Upvote';
 export * from './User';
 export * from './UserShare';
 export * from './V';
+export * from './Swords';
 export * from './Volume';
+export * from './VolumeLow';
 export * from './VolumeOff';
 export * from './Warning';
 export * from './Whatsapp';

packages/shared/src/components/modals/common.tsx

@@ -526,6 +526,13 @@ const PostImpressionsModal = dynamic(
     ),
 );
 
+const WeeklyQuizModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "weeklyQuizModal" */ '../../features/weeklyQuiz/components/WeeklyQuizModal'
+    ),
+);
+
 export const modals = {
   [LazyModal.SquadMember]: SquadMemberModal,
   [LazyModal.UpvotedPopup]: UpvotedPopupModal,
@@ -611,6 +618,7 @@ export const modals = {
   [LazyModal.ReaderExtensionInstall]: ReaderExtensionInstallModal,
   [LazyModal.ReaderPreview]: ReaderPreviewLazyModal,
   [LazyModal.PostImpressions]: PostImpressionsModal,
+  [LazyModal.WeeklyQuiz]: WeeklyQuizModal,
 };
 
 type GetComponentProps<T> = T extends

packages/shared/src/components/modals/common/types.ts

@@ -109,6 +109,7 @@ export enum LazyModal {
   ReaderExtensionInstall = 'readerExtensionInstall',
   ReaderPreview = 'readerPreview',
   PostImpressions = 'postImpressions',
+  WeeklyQuiz = 'weeklyQuiz',
 }
 
 export type ModalTabItem = {