mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] interviews/purchase: change from blur overlay to vignette overlay (#980)

This commit is contained in:
Nitesh Seram 2024-11-15 10:15:37 +05:30 committed by GitHub
parent 8784e998e2
commit e94f2c57a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/components/common/VignetteOverlay.tsx Normal file
View File

@ -0,0 +1,24 @@
import clsx from 'clsx';
import type { ReactNode } from 'react';
type Props = Readonly<{
children: ReactNode;
overlay: React.ReactNode;
overlayClass?: string;
}>;
export default function VignetteOverlay({
children,
overlay,
overlayClass = 'bg-gradient-to-t from-white via-white dark:from-neutral-900 dark:via-neutral-900',
}: Props) {
return (
<div className="relative">
{children}
<div className={clsx('absolute bottom-0 top-0 w-full')}>
<div className={clsx('absolute bottom-0 top-0 w-full', overlayClass)} />
<div className={clsx('absolute bottom-0 w-full px-8')}>{overlay}</div>
</div>
</div>
);
}

12
apps/web/src/components/interviews/company/InterviewsCompanyGuidePage.tsx
View File

@ -14,7 +14,7 @@ import {
import { trpc } from '~/hooks/trpc';
import BlurOverlay from '~/components/common/BlurOverlay';
import VignetteOverlay from '~/components/common/VignetteOverlay';
import { useUserProfile } from '~/components/global/UserProfileProvider';
import QuestionPaywall from '~/components/interviews/questions/common/QuestionPaywall';
import type {
@ -211,17 +211,13 @@ export default function InterviewsCompanyGuidePage({
showSummarySection={false}
/>
) : (
<BlurOverlay
align="bottom"
blurClassName="blur-sm"
opacity={0.5}
<VignetteOverlay
overlay={
<QuestionPaywall
background={false}
feature="company-guides"
/>
}
showOverlay={true}>
}>
<div
className="border-lg pointer-events-none touch-none select-none"
// So that focus cannot go into the card, which is not meant to be used.
@ -231,7 +227,7 @@ export default function InterviewsCompanyGuidePage({
questions={questions.slice(0, 5)}
/>
</div>
</BlurOverlay>
</VignetteOverlay>
)}
</div>
{bottomContent && (

12
apps/web/src/components/interviews/questions/listings/learning/focus-areas/InterviewsFocusAreaPage.tsx
View File

@ -13,7 +13,7 @@ import {
import { trpc } from '~/hooks/trpc';
import BlurOverlay from '~/components/common/BlurOverlay';
import VignetteOverlay from '~/components/common/VignetteOverlay';
import { useUserProfile } from '~/components/global/UserProfileProvider';
import QuestionPaywall from '~/components/interviews/questions/common/QuestionPaywall';
import type {
@ -133,14 +133,10 @@ export default function InterviewsFocusAreaPage({
showSummarySection={false}
/>
) : (
<BlurOverlay
align="bottom"
blurClassName="blur-sm"
opacity={0.5}
<VignetteOverlay
overlay={
<QuestionPaywall background={false} feature="focus-areas" />
}
showOverlay={true}>
}>
<div
className="border-lg pointer-events-none touch-none select-none"
// So that focus cannot go into the card, which is not meant to be used.
@ -150,7 +146,7 @@ export default function InterviewsFocusAreaPage({
questions={questions.slice(0, 5)}
/>
</div>
</BlurOverlay>
</VignetteOverlay>
)}
</Section>
{bottomContent && (

12
apps/web/src/components/interviews/questions/listings/learning/study-plans/InterviewsStudyPlanPage.tsx
View File

@ -13,7 +13,7 @@ import {
import { trpc } from '~/hooks/trpc';
import BlurOverlay from '~/components/common/BlurOverlay';
import VignetteOverlay from '~/components/common/VignetteOverlay';
import { useUserProfile } from '~/components/global/UserProfileProvider';
import QuestionPaywall from '~/components/interviews/questions/common/QuestionPaywall';
import type {
@ -123,14 +123,10 @@ export default function InterviewsStudyPlanPage({
showSummarySection={false}
/>
) : (
<BlurOverlay
align="bottom"
blurClassName="blur-sm"
opacity={0.5}
<VignetteOverlay
overlay={
<QuestionPaywall background={false} feature="study-plans" />
}
showOverlay={true}>
}>
<div
className="border-lg pointer-events-none touch-none select-none"
// So that focus cannot go into the card, which is not meant to be used.
@ -140,7 +136,7 @@ export default function InterviewsStudyPlanPage({
questions={questions.slice(0, 5)}
/>
</div>
</BlurOverlay>
</VignetteOverlay>
)}
</div>
</Section>