QC Kak Inno 28 Okt
QC Kak Ayu 28 Okt QC Keano 28 Okt
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
// Create a new component: components/EdukasiCard.tsx
|
||||
'use client';
|
||||
|
||||
import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
|
||||
import { Box, Paper, Stack, Text } from '@mantine/core';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
interface EdukasiCardProps {
|
||||
@@ -31,7 +31,6 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
|
||||
<Box>
|
||||
<Stack align="center" gap="xs" mb="md">
|
||||
<Box style={{ color }}>{icon}</Box>
|
||||
<Tooltip label={title} maw={250} multiline withArrow position="top">
|
||||
<Text
|
||||
fz={{ base: 'h5', md: 'h4' }}
|
||||
fw={700}
|
||||
@@ -47,7 +46,6 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
|
||||
}}
|
||||
dangerouslySetInnerHTML={{ __html: title }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
<Text
|
||||
size="sm"
|
||||
|
||||
@@ -62,7 +62,6 @@ export default function EdukasiLingkunganPage() {
|
||||
</Text>
|
||||
<Text
|
||||
fz={{ base: 'md', md: 'lg' }}
|
||||
c="dimmed"
|
||||
maw={800}
|
||||
mx="auto"
|
||||
>
|
||||
@@ -78,21 +77,21 @@ export default function EdukasiLingkunganPage() {
|
||||
verticalSpacing={{ base: 'md', md: 'xl' }}
|
||||
>
|
||||
<EdukasiCard
|
||||
icon={<IconLeaf size={32} />}
|
||||
icon={<IconLeaf size={45} />}
|
||||
title={tujuan.data?.judul || ''}
|
||||
description={tujuan.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
|
||||
<EdukasiCard
|
||||
icon={<IconRecycle size={32} />}
|
||||
icon={<IconRecycle size={45} />}
|
||||
title={materi.data?.judul || ''}
|
||||
description={materi.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
/>
|
||||
|
||||
<EdukasiCard
|
||||
icon={<IconPlant2 size={32} />}
|
||||
icon={<IconPlant2 size={45} />}
|
||||
title={contoh.data?.judul || ''}
|
||||
description={contoh.data?.deskripsi || ''}
|
||||
color={colors['blue-button']}
|
||||
|
||||
@@ -44,13 +44,12 @@ function Page() {
|
||||
<Box style={{ display: 'flex', height: '100%' }}>
|
||||
<Paper
|
||||
p="lg"
|
||||
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
>
|
||||
<Stack gap="md" px={20} style={{ height: '100%' }}>
|
||||
@@ -74,13 +73,12 @@ function Page() {
|
||||
<Box style={{ display: 'flex', height: '100%' }}>
|
||||
<Paper
|
||||
p="lg"
|
||||
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
>
|
||||
<Stack gap="md" px={20} style={{ height: '100%' }}>
|
||||
@@ -105,13 +103,12 @@ function Page() {
|
||||
<Box>
|
||||
<Paper
|
||||
p="lg"
|
||||
bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
flexDirection: 'column',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
>
|
||||
<Stack gap="md" px={20} style={{ height: '100%' }}>
|
||||
|
||||
@@ -91,7 +91,7 @@ function Page() {
|
||||
<Box style={{ alignContent: 'center', alignItems: 'center' }}>
|
||||
{iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
|
||||
</Box>
|
||||
<Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
|
||||
<Text fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
|
||||
</Flex>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user