feat: update Community component to use Iconify for icons and adjust CommunitiesSection configuration
This commit is contained in:
ArraysID
@@ -1,32 +1,19 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
Button,
|
||||
FacebookIcon,
|
||||
InstagramIcon,
|
||||
MessageCircleIcon,
|
||||
} from '@imphnen-frontend-service/shadcn-ui/atoms';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { buttonVariants } from '@imphnen-frontend-service/shadcn-ui/atoms';
|
||||
import { cn } from '@imphnen-frontend-service/utils';
|
||||
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
|
||||
variant="outline"
|
||||
className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300"
|
||||
<Link
|
||||
href={c.buttonLink}
|
||||
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>
|
||||
|
||||
@@ -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',
|
||||
options: [
|
||||
{ label: 'Facebook', value: 'FacebookIcon' },
|
||||
{ label: 'Instagram', value: 'InstagramIcon' },
|
||||
{ label: 'Discord', value: 'MessageCircleIcon' },
|
||||
],
|
||||
type: 'text',
|
||||
required: true,
|
||||
},
|
||||
{ name: 'title', type: 'text', required: true },
|
||||
|
||||
Generated
+22
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user