import { forwardRef } from "react";
import {
Users,
User,
Linkedin,
Twitter,
Globe,
Mail,
Award,
Target,
Briefcase,
MapPin,
Star
} 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 {
LayoutBlock,
createLayoutContentHook
} from "@ui8kit/core";
// Reuse team member interfaces from SplitTeam
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 GridTeamData {
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 GridTeamProps {
content: GridTeamData;
variant?: "grid" | "cards" | "minimal" | "showcase" | "directory";
useContainer?: boolean;
py?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
className?: string;
}
// Render social links component (reused from SplitTeam)
const RenderSocialLinks = ({ social, 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 grid team variants
const gridTeamContentHooks = {
// 1. Classic Grid Layout
grid: createLayoutContentHook({
header: (content: GridTeamData) => (
{content.badge && (
{content.badge}
)}
{content.title}
{content.description && (
{content.description}
)}
{content.stats && (
{content.stats.totalMembers && (
{content.stats.totalMembers}
Team Members
)}
{content.stats.departments && (
{content.stats.departments}
Departments
)}
{content.stats.locations && (
{content.stats.locations}
Locations
)}
)}
),
item: (member: TeamMember) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
{member.department && (
{member.department}
)}
{member.bio && (
{member.bio}
)}
)
}),
// 2. Detailed Card Layout
cards: createLayoutContentHook({
header: (content: GridTeamData) => (
{content.badge || "Our Team"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (member: TeamMember) => (
{/* Avatar */}
{member.avatar ? (
) : (
)}
{/* Member Info */}
{member.name}
{member.position}
{member.department && (
{member.department}
)}
{member.location && (
{member.location}
)}
{/* Bio */}
{member.bio && (
{member.bio}
)}
{/* Skills */}
{member.skills && (
{member.skills.slice(0, 4).map((skill, index) => (
{skill}
))}
)}
{/* Social Links */}
)
}),
// 3. Minimal Layout
minimal: createLayoutContentHook({
header: (content: GridTeamData) => (
{content.badge || "Team"}
{content.title}
{content.subtitle && (
{content.subtitle}
)}
),
item: (member: TeamMember) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
)
}),
// 4. Showcase with Highlights
showcase: createLayoutContentHook({
header: (content: GridTeamData) => (
{content.title}
{content.description && (
{content.description}
)}
{content.hiring && (
{content.hiring.title || "We're Hiring!"}
{content.hiring.openPositions && (
{content.hiring.openPositions} Open Positions
)}
)}
),
item: (member: TeamMember, index: number) => {
const isFeatured = member.featured || index % 6 === 0;
return (
{isFeatured && (
Featured
)}
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
{member.department && (
{member.department}
)}
{member.skills && isFeatured && (
{member.skills.slice(0, 3).map((skill, skillIndex) => (
{skill}
))}
)}
);
}
}),
// 5. Directory Style
directory: createLayoutContentHook({
header: (content: GridTeamData) => (
{content.title}
{content.description && (
{content.description}
)}
{content.stats && (
{content.stats.totalMembers && (
{content.stats.totalMembers} Members
)}
{content.stats.departments && (
{content.stats.departments} Departments
)}
{content.stats.locations && (
{content.stats.locations} Locations
)}
)}
),
item: (member: TeamMember) => (
{member.avatar ? (
) : (
)}
{member.name}
{member.position}
{member.department && (
{member.department}
)}
{member.location && (
{member.location}
)}
)
})
};
export const GridTeam = forwardRef(
({
content,
variant = "grid",
useContainer = true,
py = "lg",
className,
...props
}, ref) => {
// Choose content hooks based on variant
const contentHooks = gridTeamContentHooks[variant] || gridTeamContentHooks.grid;
// Determine layout type and grid configuration based on variant
const getLayoutConfig = () => {
switch (variant) {
case "cards":
return { layout: "grid" as const, cols: "1-2-3" };
case "minimal":
return { layout: "grid" as const, cols: "1-2-3-4" };
case "showcase":
return { layout: "grid" as const, cols: "1-2-3" };
case "directory":
return { layout: "grid" as const, cols: "1-2" };
default: // grid
return { layout: "grid" as const, cols: "1-2-3-4" };
}
};
const layoutConfig = getLayoutConfig();
return (
);
}
);
GridTeam.displayName = "GridTeam";
// Export template configurations
export const gridTeamTemplates = {
grid: {
id: "gridTeamGrid",
name: "Classic Team Grid",
description: "Traditional grid layout with team member cards",
component: GridTeam,
defaultProps: { variant: "grid" as const }
},
cards: {
id: "gridTeamCards",
name: "Detailed Team Cards",
description: "Rich card layout with detailed member information",
component: GridTeam,
defaultProps: { variant: "cards" as const }
},
minimal: {
id: "gridTeamMinimal",
name: "Minimal Team Display",
description: "Clean, minimal team member presentation",
component: GridTeam,
defaultProps: { variant: "minimal" as const }
},
showcase: {
id: "gridTeamShowcase",
name: "Team Showcase",
description: "Highlighted team members with featured profiles",
component: GridTeam,
defaultProps: { variant: "showcase" as const }
},
directory: {
id: "gridTeamDirectory",
name: "Team Directory",
description: "Compact directory-style team member listing",
component: GridTeam,
defaultProps: { variant: "directory" as const }
}
};