150 lines
10 KiB
TypeScript
150 lines
10 KiB
TypeScript
import React from 'react';
|
||
|
||
interface QAItem {
|
||
question: string;
|
||
answer: string;
|
||
}
|
||
|
||
interface CompanyWikiCompletedStateProps {
|
||
qaItems?: QAItem[];
|
||
activeSection?: number;
|
||
onSectionClick?: (section: number) => void;
|
||
onInviteEmployees?: () => void;
|
||
onCopyLink?: () => void;
|
||
}
|
||
|
||
const defaultQAItems: QAItem[] = [
|
||
{
|
||
question: "What is the mission of your company?",
|
||
answer: "To empower small businesses with AI-driven automation tools that increase efficiency and reduce operational overhead."
|
||
},
|
||
{
|
||
question: "How has your mission evolved in the last 1–3 years?",
|
||
answer: "We shifted from general SaaS tools to vertical-specific solutions, with deeper integrations and onboarding support."
|
||
},
|
||
{
|
||
question: "What is your 5-year vision for the company?",
|
||
answer: "To become the leading AI operations platform for SMBs in North America, serving over 100,000 customers."
|
||
},
|
||
{
|
||
question: "What are your company's top 3 strategic advantages?",
|
||
answer: "Fast product iteration enabled by in-house AI capabilities\nDeep customer understanding from vertical specialization\nHigh customer retention due to integrated onboarding"
|
||
},
|
||
{
|
||
question: "What are your biggest vulnerabilities or threats?",
|
||
answer: "Dependence on a single marketing channel, weak middle management, and rising customer acquisition costs."
|
||
}
|
||
];
|
||
|
||
const sections = [
|
||
"Company Overview & Vision",
|
||
"Leadership & Organizational Structure",
|
||
"Operations & Execution",
|
||
"Culture & Team Health",
|
||
"Sales, Marketing & Growth",
|
||
"Financial Health & Metrics",
|
||
"Innovation & Product/Service Strategy",
|
||
"Personal Leadership & Risk"
|
||
];
|
||
|
||
export const CompanyWikiCompletedState: React.FC<CompanyWikiCompletedStateProps> = ({
|
||
qaItems = defaultQAItems,
|
||
activeSection = 1,
|
||
onSectionClick,
|
||
onInviteEmployees,
|
||
onCopyLink
|
||
}) => {
|
||
return (
|
||
<div className="flex-1 self-stretch inline-flex justify-start items-center">
|
||
{/* Table of Contents */}
|
||
<div className="flex-1 self-stretch max-w-64 min-w-64 border-r border-Outline-Outline-Gray-200 dark:border-Neutrals-NeutralSlate200 inline-flex flex-col justify-start items-start">
|
||
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate950] dark:text-[--Neutrals-NeutralSlate950] text-base font-medium font-['Inter'] leading-normal">Table of contents</div>
|
||
</div>
|
||
<div className="self-stretch px-3 flex flex-col justify-start items-start gap-1.5">
|
||
{sections.map((section, index) => {
|
||
const sectionNumber = index + 1;
|
||
const isActive = sectionNumber === activeSection;
|
||
|
||
return (
|
||
<div
|
||
key={index}
|
||
onClick={() => onSectionClick?.(sectionNumber)}
|
||
className={`self-stretch p-2 rounded-[10px] inline-flex justify-start items-center gap-2 overflow-hidden cursor-pointer hover:bg-[--Neutrals-NeutralSlate50] dark:hover:bg-[--Neutrals-NeutralSlate700] ${isActive ? 'bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate700] shadow-[0px_1px_2px_0px_rgba(10,13,20,0.03)]' : ''}`}
|
||
>
|
||
<div className={`h-5 p-0.5 rounded-[999px] inline-flex flex-col justify-center items-center gap-0.5 overflow-hidden ${isActive ? 'bg-[--Brand-Orange]' : 'bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate600]'}`}>
|
||
<div className={`w-4 text-center justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-[--Neutrals-NeutralSlate0]' : 'text-Text-Dark-950 dark:text-[--Neutrals-NeutralSlate0]'}`}>
|
||
{sectionNumber}
|
||
</div>
|
||
</div>
|
||
<div className={`flex-1 justify-start text-xs font-medium font-['Inter'] leading-none ${isActive ? 'text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate100]' : 'text-Text-Gray-500 dark:text-[--Neutrals-NeutralSlate100]'}`}>
|
||
{section}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 self-stretch inline-flex flex-col justify-start items-start">
|
||
<div className="self-stretch p-5 inline-flex justify-start items-center gap-2.5">
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-xl font-medium font-['Neue_Montreal'] leading-normal">
|
||
{sections[activeSection - 1]}
|
||
</div>
|
||
</div>
|
||
<div className="self-stretch px-5 flex flex-col justify-start items-start gap-4">
|
||
{qaItems.map((item, index) => (
|
||
<div key={index} className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] dark:bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
|
||
<div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
|
||
<div className="flex-1 flex justify-center items-center gap-3">
|
||
<div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] dark:text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">
|
||
{item.question}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="self-stretch px-3 py-2 bg-[--Neutrals-NeutralSlate0] dark:bg-[--Neutrals-NeutralSlate0] rounded-[10px] inline-flex justify-between items-center">
|
||
<div className="flex-1 flex justify-start items-start gap-3">
|
||
<div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] dark:text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] dark:text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal whitespace-pre-line">
|
||
{item.answer}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Additional Questions */}
|
||
<div className="self-stretch pl-3 pr-6 pt-3 pb-6 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
|
||
<div className="self-stretch inline-flex justify-center items-center gap-3">
|
||
<div className="flex-1 justify-start text-Text-Gray-600 text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
|
||
</div>
|
||
<div className="self-stretch px-3 py-2 bg-Light-Grays-l-gray08 rounded-[10px] outline outline-1 outline-offset-[-1px] outline-Text-Gray-200 inline-flex justify-between items-center">
|
||
<div className="flex-1 flex justify-start items-start gap-3">
|
||
<div className="flex-1 justify-start text-Text-Gray-800 text-base font-normal font-['Inter'] leading-normal">
|
||
Our mission is to not only create value but also to foster a collaborative environment where innovation thrives. We aim to empower our team members to contribute their unique skills and perspectives, ensuring that every project we undertake is a reflection of our collective creativity and dedication. By prioritizing both individual growth and teamwork, we strive to build a company culture that values excellence and continuous improvement. Together, we can achieve remarkable results that benefit not just our organization, but also our clients and the community at...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="self-stretch p-3 bg-[--Neutrals-NeutralSlate100] rounded-2xl shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02)] flex flex-col justify-center items-start gap-2 overflow-hidden">
|
||
<div className="self-stretch px-3 py-px inline-flex justify-start items-center gap-2.5">
|
||
<div className="flex-1 flex justify-center items-center gap-3">
|
||
<div className="w-3 self-stretch justify-start text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">Q</div>
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate600] text-sm font-medium font-['Inter'] leading-tight">What is the mission of your company?</div>
|
||
</div>
|
||
</div>
|
||
<div className="self-stretch px-3 py-2 bg-Light-Grays-l-gray08 rounded-[10px] inline-flex justify-between items-center">
|
||
<div className="flex-1 flex justify-start items-start gap-3">
|
||
<div className="w-3.5 h-6 justify-center text-[--Neutrals-NeutralSlate300] text-base font-semibold font-['Inter'] leading-normal">A</div>
|
||
<div className="flex-1 justify-start text-[--Neutrals-NeutralSlate800] text-base font-normal font-['Inter'] leading-normal">The mission is to create value as well as working</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |