feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration

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

@@ -1,32 +1,19 @@
 'use client';
 
-import {
+import { Icon } from '@iconify/react';
-  Button,
+import { buttonVariants } from '@imphnen-frontend-service/shadcn-ui/atoms';
-  FacebookIcon,
+import { cn } from '@imphnen-frontend-service/utils';
-  InstagramIcon,
-  MessageCircleIcon,
-} from '@imphnen-frontend-service/shadcn-ui/atoms';
 import { CommunitiesSection } from 'apps/landing/src/payload-types';
 import { motion, useInView } from 'framer-motion';
+import Link from 'next/link';
 import { useRef } from 'react';
 
 export function Community(props: CommunitiesSection) {
-  const { items: communities, stats } = props;
+  const { items, stats } = props;
+
   const ref = useRef(null);
   const isInView = useInView(ref, { once: true, amount: 0.2 });
 
-  const iconMap = {
-    FacebookIcon: (
-      <FacebookIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-    ),
-    InstagramIcon: (
-      <InstagramIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-    ),
-    MessageCircleIcon: (
-      <MessageCircleIcon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
-    ),
-  };
-
   const containerVariants = {
     hidden: { opacity: 0 },
     visible: {
@@ -77,7 +64,7 @@ export function Community(props: CommunitiesSection) {
           initial="hidden"
           animate={isInView ? 'visible' : 'hidden'}
         >
-          {communities?.map((c, i) => (
+          {items?.map((c, i) => (
             <motion.div
               key={i}
               className="group relative overflow-hidden rounded-xl border bg-background p-6 transition-all hover:shadow-xl"
@@ -86,16 +73,22 @@ export function Community(props: CommunitiesSection) {
               <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
               <div className="relative z-10">
                 <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
-                  {iconMap[c.iconName]}
+                  <Icon
+                    icon={c.iconName}
+                    className="h-6 w-6 text-blue-600 dark:text-blue-400"
+                  />
                 </div>
                 <h3 className="mb-2 text-xl font-bold">{c.title}</h3>
                 <p className="mb-6 text-muted-foreground">{c.description}</p>
-                <Button
+                <Link
-                  variant="outline"
+                  href={c.buttonLink}
-                  className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
+                  className={cn(
+                    buttonVariants({ variant: 'outline' }),
+                    'w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300'
+                  )}
                 >
                   {c.buttonText}
-                </Button>
+                </Link>
               </div>
               <div className="absolute -bottom-1 -right-1 w-20 h-20 bg-gradient-to-tl from-primary/20 to-transparent rounded-tl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
             </motion.div>

apps/landing/src/collections/CommunitiesSection.ts

@@ -10,7 +10,7 @@ export const CommunitiesSection: GlobalConfig = {
       required: true,
       defaultValue: [
         {
-          iconName: 'FacebookIcon',
+          iconName: 'tabler:brand-facebook',
           title: 'Facebook Group',
           description:
             'Bergabunglah dengan grup Facebook kami untuk diskusi santai dan berbagi artikel menarik.',
@@ -18,7 +18,7 @@ export const CommunitiesSection: GlobalConfig = {
           buttonLink: 'https://facebook.com/groups/1032515944638255',
         },
         {
-          iconName: 'InstagramIcon',
+          iconName: 'tabler:brand-instagram',
           title: 'Instagram',
           description:
             'Ikuti kami di Instagram untuk tips programming, konten inspiratif, dan info event terbaru.',
@@ -26,7 +26,7 @@ export const CommunitiesSection: GlobalConfig = {
           buttonLink: 'https://www.instagram.com/imphnen.dev',
         },
         {
-          iconName: 'MessageCircleIcon',
+          iconName: 'tabler:brand-discord-filled',
           title: 'Discord Server',
           description:
             'Diskusikan langsung dengan sesama programmer dan dapatkan bantuan langsung dari para ahli.',
@@ -37,12 +37,7 @@ export const CommunitiesSection: GlobalConfig = {
       fields: [
         {
           name: 'iconName',
-          type: 'select',
+          type: 'text',
-          options: [
-            { label: 'Facebook', value: 'FacebookIcon' },
-            { label: 'Instagram', value: 'InstagramIcon' },
-            { label: 'Discord', value: 'MessageCircleIcon' },
-          ],
           required: true,
         },
         { name: 'title', type: 'text', required: true },

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@ant-design/icons": "^6.0.0",
         "@hookform/resolvers": "^5.0.1",
+        "@iconify/react": "^6.0.0",
         "@payloadcms/db-postgres": "^3.37.0",
         "@payloadcms/next": "^3.37.0",
         "@payloadcms/richtext-lexical": "^3.37.0",
@@ -4628,6 +4629,27 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/react": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-6.0.0.tgz",
+      "integrity": "sha512-eqNscABVZS8eCpZLU/L5F5UokMS9mnCf56iS1nM9YYHdH8ZxqZL9zyjSwW60IOQFsXZkilbBiv+1paMXBhSQnw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.34.1",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz",

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@hookform/resolvers": "^5.0.1",
+    "@iconify/react": "^6.0.0",
     "@payloadcms/db-postgres": "^3.37.0",
     "@payloadcms/next": "^3.37.0",
     "@payloadcms/richtext-lexical": "^3.37.0",