feat: update FeaturesSection to use Iconify icons and adjust icon properties

apps/landing/src/app/(frontend)/_components/features.tsx

@@ -1,11 +1,6 @@
 'use client';
 
-import {
+import { Icon } from '@iconify/react';
-  BookOpenIcon,
-  CodeIcon,
-  LaptopIcon,
-  UsersIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
 import { FeaturesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
@@ -13,12 +8,6 @@ import { useRef } from 'react';
 export function Features(props: FeaturesSection) {
   const { heading, subheading, features } = props;
 
-  const featuresFormatted = features?.map((f) => ({
-    icon: IconMapper(String(f.icon)),
-    title: f.title,
-    description: f.description,
-  }));
-
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
@@ -77,7 +66,7 @@ export function Features(props: FeaturesSection) {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {featuresFormatted?.map((feature, index) => (
+          {features?.map((feature, index) => (
             <motion.div
               key={index}
               className="group relative overflow-hidden rounded-xl border bg-background/50 backdrop-blur-sm p-6 transition-all hover:shadow-md hover:shadow-primary/5 hover:border-primary/50"
@@ -87,7 +76,10 @@ export function Features(props: FeaturesSection) {
 
               <div className="relative z-10">
                 <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 group-hover:bg-primary/20 transition-colors">
-                  {feature.icon}
+                  <Icon
+                    icon={feature.iconName}
+                    className="h-6 w-6 text-primary"
+                  />
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{feature.title}</h3>
                 <p className="text-muted-foreground">{feature.description}</p>
@@ -101,18 +93,3 @@ export function Features(props: FeaturesSection) {
     </section>
   );
 }
-
-function IconMapper(name: string) {
-  switch (name) {
-    case 'LaptopIcon':
-      return <LaptopIcon className="h-6 w-6 text-primary" />;
-    case 'UsersIcon':
-      return <UsersIcon className="h-6 w-6 text-primary" />;
-    case 'BookOpenIcon':
-      return <BookOpenIcon className="h-6 w-6 text-primary" />;
-    case 'CodeIcon':
-      return <CodeIcon className="h-6 w-6 text-primary" />;
-    default:
-      return null;
-  }
-}

apps/landing/src/collections/FeaturesSection.ts

@@ -20,25 +20,25 @@ export const FeaturesSection: GlobalConfig = {
       type: 'array',
       defaultValue: [
         {
-          icon: 'LaptopIcon',
+          iconName: 'tabler:device-laptop',
           title: 'Belajar Tanpa Koding',
           description:
             'Pelajari konsep programming dengan cara yang mudah dipahami tanpa harus menulis kode yang rumit.',
         },
         {
-          icon: 'UsersIcon',
+          iconName: 'tabler:users',
           title: 'Komunitas Supportif',
           description:
             'Bergabunglah dengan komunitas programmer Indonesia yang siap membantu dan berbagi pengalaman.',
         },
         {
-          icon: 'BookOpenIcon',
+          iconName: 'tabler:book',
           title: 'Tutorial Interaktif',
           description:
             'Akses tutorial interaktif yang membuat konsep programming lebih mudah untuk dipahami.',
         },
         {
-          icon: 'CodeIcon',
+          iconName: 'tabler:code',
           title: 'Proyek Praktis',
           description:
             'Terapkan pengetahuan Anda dalam proyek nyata dengan panduan langkah demi langkah.',
@@ -46,18 +46,14 @@ export const FeaturesSection: GlobalConfig = {
       ],
       fields: [
         {
-          name: 'icon',
+          name: 'iconName',
-          type: 'select',
+          type: 'text',
-          options: [
+          required: true,
-            { label: 'LaptopIcon', value: 'LaptopIcon' },
-            { label: 'UsersIcon', value: 'UsersIcon' },
-            { label: 'BookOpenIcon', value: 'BookOpenIcon' },
-            { label: 'CodeIcon', value: 'CodeIcon' },
-          ],
         },
         {
           name: 'title',
           type: 'text',
+          required: true,
         },
         {
           name: 'description',

apps/landing/src/payload-types.ts

@@ -315,8 +315,8 @@ export interface FeaturesSection {
   subheading?: string | null;
   features?:
     | {
-        icon?: ('LaptopIcon' | 'UsersIcon' | 'BookOpenIcon' | 'CodeIcon') | null;
+        iconName: string;
-        title?: string | null;
+        title: string;
         description?: string | null;
         id?: string | null;
       }[]
@@ -331,7 +331,7 @@ export interface FeaturesSection {
 export interface CommunitiesSection {
   id: number;
   items: {
-    iconName: 'FacebookIcon' | 'InstagramIcon' | 'MessageCircleIcon';
+    iconName: string;
     title: string;
     description: string;
     buttonText: string;
@@ -384,7 +384,7 @@ export interface FeaturesSectionSelect<T extends boolean = true> {
   features?:
     | T
     | {
-        icon?: T;
+        iconName?: T;
         title?: T;
         description?: T;
         id?: T;