import { forwardRef } from "react";
import {
Users,
User,
Linkedin,
Twitter,
Globe,
Mail,
Award,
Target,
Briefcase,
Heart,
Coffee,
MapPin
} from "lucide-react";
import {
Stack,
Group,
Title,
Text,
Badge,
Button,
Image,
Icon,
Box,
Card
} from "@ui8kit/core";
import { skyOSTheme } from "@ui8kit/theme";
const currentTheme = skyOSTheme;
const theme = {
theme: currentTheme,
themeRounded: currentTheme.rounded,
themeButtonSize: currentTheme.buttonSize
}
import {
SplitBlock,
createContentHook,
} from "@ui8kit/core";
// Team member interfaces
interface TeamMember {
id: string;
name: string;
position: string;
description: string;
department?: string;
bio?: string;
avatar?: {
src: string;
alt: string;
};
social?: {
linkedin?: string;
twitter?: string;
website?: string;
email?: string;
};
skills?: string[];
location?: string;
joinDate?: string;
featured?: boolean;
}
export interface SplitTeamData {
title: string;
subtitle?: string;
description?: string;
badge?: string;
members: TeamMember[];
stats?: {
totalMembers?: string;
departments?: string;
locations?: string;
};
hiring?: {
title?: string;
description?: string;
ctaText?: string;
openPositions?: number;
};
}
interface SplitTeamProps {
content: SplitTeamData;
variant?: "leadership" | "showcase" | "hiring" | "culture" | "departments";
mediaPosition?: "left" | "right";
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
className?: string;
}
// Render social links component
const RenderSocialLinks = ({ social, size: _size = "sm" }: { social?: TeamMember['social']; size?: "xs" | "sm" | "md" }) => {
if (!social) return null;
return (
{social.linkedin && (
)}
{social.twitter && (
)}
{social.website && (
)}
{social.email && (
)}
);
};
// Custom content hooks for different split team variants
const splitTeamContentHooks = {
// 1. Leadership Team Focus
leadership: createContentHook({
content: (content: SplitTeamData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description && (
{content.description}
)}
{/* Featured Leadership Members */}
{content.members.filter(member => member.featured).slice(0, 3).map((member) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
{member.department && (
{member.department}
)}
{member.bio && (
{member.bio}
)}
{member.location && (
{member.location}
)}
))}
)
}),
// 2. Team Showcase with Skills
showcase: createContentHook({
content: (content: SplitTeamData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
{/* Team Members Showcase */}
{content.members.slice(0, 4).map((member) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
{member.skills && (
{member.skills.slice(0, 3).map((skill, index) => (
{skill}
))}
)}
))}
{content.members.length > 4 && (
+{content.members.length - 4} more team members
)}
)
}),
// 3. Hiring & Recruitment Focus
hiring: createContentHook({
content: (content: SplitTeamData) => (
{content.title}
{content.description && (
{content.description}
)}
{/* Hiring Stats */}
{content.hiring && (
{content.hiring.title || "We're Hiring!"}
{content.hiring.description && (
{content.hiring.description}
)}
{content.hiring.openPositions && (
{content.hiring.openPositions} Open Positions
)}
)}
{/* Sample Team Members */}
{content.members.slice(0, 3).map((member) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
))}
{content.hiring?.ctaText && (
)}
)
}),
// 4. Company Culture Focus
culture: createContentHook({
content: (content: SplitTeamData) => (
{content.badge || "Our Culture"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
{/* Culture Stats */}
{content.stats && (
{content.stats.totalMembers && (
{content.stats.totalMembers}
Team Members
)}
{content.stats.locations && (
{content.stats.locations}
Locations
)}
{content.stats.departments && (
{content.stats.departments}
Departments
)}
)}
{/* Featured Culture Highlights */}
Remote-First Culture
Work from anywhere in the world
Growth Mindset
Continuous learning and development
Collaborative Spirit
We succeed together as one team
)
}),
// 5. Departments Overview
departments: createContentHook({
content: (content: SplitTeamData) => (
{content.title}
{content.description && (
{content.description}
)}
{/* Department Breakdown */}
{/* Group members by department */}
{Array.from(new Set(content.members.map(m => m.department).filter(Boolean))).map((department) => {
const departmentMembers = content.members.filter(m => m.department === department);
return (
{department}
{departmentMembers.length} members
{departmentMembers.slice(0, 3).map((member) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
))}
{departmentMembers.length > 3 && (
+{departmentMembers.length - 3} more members
)}
);
})}
)
})
};
export const SplitTeam = forwardRef(
({
content,
variant = "leadership",
mediaPosition = "right",
useContainer = true,
py = "lg",
className,
...props
}, ref) => {
// Choose content hooks based on variant
const contentHooks = splitTeamContentHooks[variant] || splitTeamContentHooks.leadership;
// Create media section with team-related visuals
const createMediaSection = (): React.ReactNode => {
switch (variant) {
case "leadership":
return (
Leadership Excellence
Experienced leaders driving innovation and growth
);
case "showcase":
return (
{[Users, Target, Briefcase, Heart].map((LucideIcon, index) => (
))}
Talented professionals working together
);
case "hiring":
return (
Join Our Team
Exciting opportunities for passionate professionals
);
case "culture":
return (
{[
{ icon: Heart, label: "Culture" },
{ icon: Coffee, label: "Remote" },
{ icon: Users, label: "Team" }
].map((item, index) => (
{item.label}
))}
Building an amazing workplace culture
);
case "departments":
return (
Cross-Functional Teams
Diverse expertise across all departments
);
default:
return (
);
}
};
return (
);
}
);
SplitTeam.displayName = "SplitTeam";
// Export template configurations
export const splitTeamTemplates = {
leadership: {
id: "splitTeamLeadership",
name: "Leadership Team",
description: "Showcase leadership team with detailed profiles and achievements",
component: SplitTeam,
defaultProps: { variant: "leadership" as const }
},
showcase: {
id: "splitTeamShowcase",
name: "Team Showcase",
description: "Display team members with skills and social links",
component: SplitTeam,
defaultProps: { variant: "showcase" as const }
},
hiring: {
id: "splitTeamHiring",
name: "Hiring & Recruitment",
description: "Team section focused on recruitment and open positions",
component: SplitTeam,
defaultProps: { variant: "hiring" as const }
},
culture: {
id: "splitTeamCulture",
name: "Company Culture",
description: "Highlight company culture and team statistics",
component: SplitTeam,
defaultProps: { variant: "culture" as const }
},
departments: {
id: "splitTeamDepartments",
name: "Departments Overview",
description: "Organize team members by departments and roles",
component: SplitTeam,
defaultProps: { variant: "departments" as const }
}
};