Fix organization setup flow: redirect to onboarding for incomplete setup
This commit is contained in:
127
components/figma/FigmaQuestion.tsx
Normal file
127
components/figma/FigmaQuestion.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import React from 'react';
|
||||
|
||||
interface FigmaQuestionProps {
|
||||
questionNumber?: string | number;
|
||||
title: string;
|
||||
description?: string;
|
||||
answer?: string;
|
||||
onAnswerChange?: (value: string) => void;
|
||||
onBack?: () => void;
|
||||
onNext?: () => void;
|
||||
showNavigation?: boolean;
|
||||
nextLabel?: string;
|
||||
backLabel?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const FigmaQuestion: React.FC<FigmaQuestionProps> = ({
|
||||
questionNumber = 'Q',
|
||||
title,
|
||||
description,
|
||||
answer = '',
|
||||
onAnswerChange,
|
||||
onBack,
|
||||
onNext,
|
||||
showNavigation = true,
|
||||
nextLabel = 'Next',
|
||||
backLabel = 'Back',
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className={`w-[600px] px-5 pt-5 pb-6 bg-Other-White rounded-2xl outline outline-1 outline-offset-[-1px] outline-Neutrals-NeutralSlate200 inline-flex flex-col justify-end items-end gap-4 ${className}`}>
|
||||
{/* Question Header */}
|
||||
<div className="self-stretch inline-flex justify-start items-start gap-3">
|
||||
<div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">
|
||||
{questionNumber}
|
||||
</div>
|
||||
<div className="flex-1 inline-flex flex-col justify-start items-start gap-2">
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate950 text-xl font-semibold font-['Inter'] leading-loose">
|
||||
{title}
|
||||
</div>
|
||||
{description && (
|
||||
<div className="self-stretch justify-start text-Neutrals-NeutralSlate500 text-sm font-normal font-['Inter'] leading-tight">
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separator */}
|
||||
<div data-svg-wrapper>
|
||||
<svg width="563" height="5" viewBox="0 0 563 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d_37_3168)">
|
||||
<path d="M1.5 1L561.5 1" stroke="var(--Neutrals-NeutralSlate200, #E9EAEB)" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_37_3168" x="0" y="0.5" width="563" height="4" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||
<feOffset dy="1.5" />
|
||||
<feGaussianBlur stdDeviation="0.75" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_37_3168" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_37_3168" result="shape" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{/* Answer Section */}
|
||||
<div className="self-stretch inline-flex justify-start items-center gap-3">
|
||||
<div className="justify-start text-zinc-300 text-xl font-medium font-['Inter'] leading-loose">A</div>
|
||||
<div className="flex-1">
|
||||
<textarea
|
||||
value={answer}
|
||||
onChange={(e) => onAnswerChange?.(e.target.value)}
|
||||
placeholder="Type your answer...."
|
||||
className="w-full bg-transparent outline-none resize-none text-Neutrals-NeutralSlate950 text-base font-normal font-['Inter'] leading-normal placeholder:text-Neutrals-NeutralSlate500 min-h-[100px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
{showNavigation && (
|
||||
<div className="inline-flex justify-start items-center gap-3">
|
||||
{onBack && (
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="px-4 py-3.5 bg-Neutrals-NeutralSlate100 rounded-[999px] flex justify-center items-center gap-1 overflow-hidden hover:bg-Neutrals-NeutralSlate200 transition-colors"
|
||||
>
|
||||
<div data-svg-wrapper className="relative">
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 15L8 10L13 5" stroke="var(--Neutrals-NeutralSlate950, #0A0D12)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Neutrals-NeutralSlate950 text-sm font-medium font-['Inter'] leading-tight">
|
||||
{backLabel}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{onNext && (
|
||||
<button
|
||||
onClick={onNext}
|
||||
className="px-4 py-3.5 bg-Brand-Orange rounded-[999px] outline outline-2 outline-offset-[-2px] outline-blue-400 flex justify-center items-center gap-1 overflow-hidden hover:bg-orange-600 transition-colors"
|
||||
>
|
||||
<div className="px-1 flex justify-center items-center">
|
||||
<div className="justify-center text-Other-White text-sm font-medium font-['Inter'] leading-tight">
|
||||
{nextLabel}
|
||||
</div>
|
||||
</div>
|
||||
<div data-svg-wrapper className="relative">
|
||||
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 15L13 10L8 5" stroke="var(--Neutrals-NeutralSlate0, #FDFDFD)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FigmaQuestion;
|
||||
Reference in New Issue
Block a user