Skip to main content

​
servicesMeta

An array containing metadata for all available services in the Product Builders application. Each service includes an ID and an associated Lucide icon component.

​
Type Definition

src/lib/data.ts
import { type LucideIcon, Presentation, GraduationCap, TrendingUp } from 'lucide-react';

type ServiceMeta = {
  id: 'strategy' | 'mentorship' | 'optimization';
  icon: LucideIcon;
};

export const servicesMeta: ServiceMeta[];

​
Structure

​
servicesMeta
ServiceMeta[]
Array of service metadata objects.
​
id
'strategy' | 'mentorship' | 'optimization'
Unique identifier for the service. Used for service selection and routing.
​
icon
LucideIcon
Lucide React icon component representing the service visually.

​
Available Services

The array contains three services:
IDIconDescription
strategyPresentationStrategy consulting services
mentorshipGraduationCapMentorship and coaching services
optimizationTrendingUpOptimization and growth services

​
Data Structure

src/lib/data.ts
export const servicesMeta: ServiceMeta[] = [
  {
    id: "strategy",
    icon: Presentation,
  },
  {
    id: "mentorship",
    icon: GraduationCap,
  },
  {
    id: "optimization",
    icon: TrendingUp,
  },
];

​
Usage Example

import { servicesMeta } from '@/lib/data';

function ServicesGrid() {
  return (
    <div className="grid grid-cols-3 gap-4">
      {servicesMeta.map((service) => {
        const Icon = service.icon;
        return (
          <div key={service.id} className="p-4 border rounded">
            <Icon className="w-8 h-8" />
            <h3>{service.id}</h3>
          </div>
        );
      })}
    </div>
  );
}

​
Integration with Forms

The service IDs are used in the contact form for service selection: 
<select name="service">
  {servicesMeta.map((service) => (
    <option key={service.id} value={service.id}>
      {service.id}
    </option>
  ))}
</select>

​
Icon Components

All icons are imported from the lucide-react package:
  • Presentation: Represents strategy and planning
  • GraduationCap: Represents education and mentorship
  • TrendingUp: Represents growth and optimization

​
Type Safety

The id field uses a union type for type safety, ensuring only valid service identifiers are used: 
type ServiceId = 'strategy' | 'mentorship' | 'optimization';

​
Source Code

See the full implementation at src/lib/data.ts:3-21

Build docs developers (and LLMs) love

Get started for freeTalk to us