[web] interviews/study-list: display insider tips for company guides

apps/web/src/app/[locale]/(interviews)/(sidebar)/(sidebar-expanded)/(no-subnav)/(study-list)/interviews/company/[slug]/questions-guides/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next/types';
 
 import { INTERVIEWS_REVAMP_BOTTOM_CONTENT } from '~/data/FeatureFlags';
 
-import InterviewsCompanyGuidePage from '~/components/interviews/company/InterviewsCompanyGuidePage';
+import InterviewsCompanyGuidePage from '~/components/interviews/questions/listings/learning/company/InterviewsCompanyGuidePage';
 
 import { fetchInterviewListingBottomContent } from '~/db/contentlayer/InterviewsListingBottomContentReader';
 import {

apps/web/src/app/[locale]/(interviews)/(sidebar)/(sidebar-expanded)/(no-subnav)/(study-list)/interviews/company/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next/types';
 
 import { INTERVIEWS_REVAMP_BOTTOM_CONTENT } from '~/data/FeatureFlags';
 
-import InterviewsCompanyGuideListPage from '~/components/interviews/company/InterviewsCompanyGuideListPage';
+import InterviewsCompanyGuideListPage from '~/components/interviews/questions/listings/learning/company/InterviewsCompanyGuideListPage';
 
 import { fetchInterviewListingBottomContent } from '~/db/contentlayer/InterviewsListingBottomContentReader';
 import { fetchInterviewsStudyLists } from '~/db/contentlayer/InterviewsStudyListReader';

apps/web/src/components/interviews/company/InterviewsCompanyInsiderTipsSlider.tsx

@@ -1,103 +0,0 @@
-import clsx from 'clsx';
-import { useEffect, useRef, useState } from 'react';
-
-import { useIntl } from '~/components/intl';
-import Heading from '~/components/ui/Heading';
-import Text from '~/components/ui/Text';
-import {
-  themeOutlineElement_FocusVisible,
-  themeOutlineElementBrandColor_FocusVisible,
-} from '~/components/ui/theme';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-
-type Props = Readonly<{
-  data: ReadonlyArray<{
-    content: string;
-    id: string;
-  }>;
-}>;
-
-export default function InterviewsCompanyInsiderTipsSlider({ data }: Props) {
-  const intl = useIntl();
-  const timer = useRef<NodeJS.Timeout>();
-  const [index, setIndex] = useState(0);
-
-  useEffect(() => {
-    if (data.length > 1) {
-      timer.current = setInterval(() => {
-        setIndex((preIndex) => (preIndex + 1) % data.length);
-      }, 6000);
-    }
-
-    return () => {
-      window.clearInterval(timer.current);
-    };
-  }, [data.length]);
-
-  const dataValue = data[index].id;
-
-  return (
-    <div className="flex w-full flex-col gap-3">
-      <Heading level="heading6">
-        {intl.formatMessage({
-          defaultMessage: 'Insider tips',
-          description: 'Title for inside tips',
-          id: 'hnbgcq',
-        })}
-      </Heading>
-      <TabsPrimitive.Root
-        className="flex flex-col gap-[18px]"
-        value={dataValue}
-        onValueChange={(newValue) => {
-          // Stop auto-advancing if user interacts with steppers.
-          window.clearInterval(timer.current);
-          setIndex(data.findIndex(({ id }) => id === newValue));
-        }}>
-        <div>
-          {data.map((item) => (
-            <TabsPrimitive.Content key={item.id} value={item.id}>
-              <Text size="body2" weight="medium">
-                <span className="italic">"{item.content}"</span>
-                <Text color="secondary" weight="normal">
-                  {' - '}
-                  {intl.formatMessage({
-                    defaultMessage: 'Interviewers',
-                    description: 'Label for interviewers',
-                    id: 'XwYAwS',
-                  })}
-                </Text>
-              </Text>
-            </TabsPrimitive.Content>
-          ))}
-        </div>
-        {data.length > 1 && (
-          <TabsPrimitive.List className="flex justify-start gap-3">
-            {data.map((item) => (
-              <TabsPrimitive.Trigger
-                key={item.id}
-                asChild={true}
-                value={item.id}>
-                <button
-                  aria-label={item.id}
-                  className="w-12 py-1.5"
-                  type="button">
-                  <div
-                    className={clsx(
-                      'h-1 w-full rounded',
-                      item.id === dataValue
-                        ? 'bg-neutral-900 dark:bg-neutral-100'
-                        : 'bg-neutral-200/70 dark:bg-neutral-700',
-                      themeOutlineElement_FocusVisible,
-                      themeOutlineElementBrandColor_FocusVisible,
-                    )}
-                  />
-                </button>
-              </TabsPrimitive.Trigger>
-            ))}
-          </TabsPrimitive.List>
-        )}
-      </TabsPrimitive.Root>
-    </div>
-  );
-}

apps/web/src/components/interviews/questions/listings/learning/company/InterviewsCompanyGuidePage.tsx

@@ -31,14 +31,14 @@ import MDXContent from '~/components/mdx/MDXContent';
 import Divider from '~/components/ui/Divider';
 import Heading from '~/components/ui/Heading';
 import Section from '~/components/ui/Heading/HeadingContext';
+import { themeTextSecondaryColor } from '~/components/ui/theme';
 
 import {
   categorizeQuestionsProgress,
   filterQuestionsProgressByList,
 } from '~/db/QuestionsUtils';
 
-import InterviewsCompanyInsiderTipsSlider from './InterviewsCompanyInsiderTipsSlider';
-import useQuestionTopicLabels from '../questions/listings/filters/useQuestionTopicLabels';
+import useQuestionTopicLabels from '../../filters/useQuestionTopicLabels';
 
 import { useUser } from '@supabase/auth-helpers-react';
 
@@ -119,20 +119,6 @@ export default function InterviewsCompanyGuidePage({
     },
   ];
 
-  // TODO(interviews): add real insider tips data
-  const insiderTipsData = [
-    {
-      content:
-        'Amazon is known to focus a lot on behavioral questions and their Leadership Principles. Hence be well-prepared in the non-technical aspects too.',
-      id: 'tip1',
-    },
-    {
-      content:
-        'Google is known to focus a lot on behavioral questions and their Leadership Principles. Hence be well-prepared in the non-technical aspects too.',
-      id: 'tip2',
-    },
-  ];
-
   return (
     <div className={clsx('flex flex-col gap-y-12 md:gap-y-16', 'relative')}>
       <div className="relative flex flex-col gap-y-8">
@@ -155,11 +141,15 @@ export default function InterviewsCompanyGuidePage({
             },
           )}
         />
-        {/* Insider tips */}
-        {insiderTipsData.length > 0 && (
-          <div className="max-w-2xl">
-            <InterviewsCompanyInsiderTipsSlider data={insiderTipsData} />
-          </div>
+        {studyList.body.code && (
+          <MDXContent
+            fontSize="sm"
+            mdxCode={studyList.body.code}
+            proseClassName={clsx(
+              'block xl:max-w-[75%]',
+              themeTextSecondaryColor,
+            )}
+          />
         )}
       </div>
       <Section>

apps/web/src/locales/en-US.json

@@ -5347,10 +5347,6 @@
     "defaultMessage": "Account",
     "description": "Profile account tab title"
   },
-  "XwYAwS": {
-    "defaultMessage": "Interviewers",
-    "description": "Label for interviewers"
-  },
   "XwbyU0": {
     "defaultMessage": "Types of UI questions, concepts to cover and rubrics",
     "description": "Front End User Interface interview questions, concepts and rubrics"
@@ -6887,10 +6883,6 @@
     "defaultMessage": "Delete comment?",
     "description": "Delete comment confirmation dialog title"
   },
-  "hnbgcq": {
-    "defaultMessage": "Insider tips",
-    "description": "Title for inside tips"
-  },
   "hqeSrQ": {
     "defaultMessage": "Everything else apart from the actual technical execution has been prepared for you. Just click \"Start project\", and we will take care of everything else.",
     "description": "Description of 'Start building' feature in Projects marketing page"