e803452a00
Deskripsi: - update calender - update color palette - update discussion - update division - update task No Issue
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
'use client'
|
|
import React, { useRef } from 'react';
|
|
import { Carousel } from '@mantine/carousel';
|
|
import { TEMA } from '@/module/_global';
|
|
import Autoplay from 'embla-carousel-autoplay';
|
|
import { Flex, Text } from '@mantine/core';
|
|
import { useHookstate } from '@hookstate/core';
|
|
export default function CarouselDivision() {
|
|
const autoplay = useRef(Autoplay({ delay: 5000 }));
|
|
const tema = useHookstate(TEMA)
|
|
return (
|
|
<>
|
|
<Carousel
|
|
withIndicators
|
|
height={150}
|
|
plugins={[autoplay.current]}
|
|
onMouseEnter={autoplay.current.stop}
|
|
onMouseLeave={autoplay.current.reset}
|
|
>
|
|
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
|
|
<Flex justify={'center'} h={"100%"} align={'center'}>
|
|
<Text c={"white"}>INFORMASI DARMASABA</Text>
|
|
</Flex>
|
|
</Carousel.Slide>
|
|
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
|
|
<Flex justify={'center'} h={"100%"} align={'center'}>
|
|
<Text c={"white"}>INFORMASI DARMASABA</Text>
|
|
</Flex>
|
|
</Carousel.Slide>
|
|
<Carousel.Slide bg={tema.get().utama} style={{ borderRadius: 10 }}>
|
|
<Flex justify={'center'} h={"100%"} align={'center'}>
|
|
<Text c={"white"}>INFORMASI DARMASABA</Text>
|
|
</Flex>
|
|
</Carousel.Slide>
|
|
</Carousel>
|
|
</>
|
|
);
|
|
}
|
|
|