/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/pages/Home/ApiIntegration/index.jsx
import './styles.scss'
import Label from 'components/Label';
import Button from 'components/common/Buttons';
import ApiIntegrationList from './ApiIntegrationList';
import { useRef, useState } from 'react';
import { useAnimation } from 'hooks/useAnimation';
import useTimeout from 'hooks/useTimeout';
import ApiConsole from './ApiConsole';
import { useSelector } from 'react-redux';
import { selectHomepageApiIntegration } from 'store/slices/HomepageSlice';
const ApiIntegraion = ({ isLoading }) => {
const { tag, title, description, button_text, button_link, api_block } = useSelector(selectHomepageApiIntegration)
const container = useRef();
const [ready, setReady] = useState(false)
useAnimation({
items: ['.apiintegration-console', '.apiintegration-info'],
container,
dependencies: [isLoading, ready],
})
useTimeout(() => {
setReady(true);
}, 2000);
return (
<section ref={container} className="inner-container apiintegration">
<ApiConsole data={api_block} />
<div className="apiintegration-info">
<Label text={tag} />
<h2>{title}</h2>
<ApiIntegrationList lists={description} />
<Button text={button_text} type={"outline"} to={button_link} target={true} />
</div>
</section>
);
}
export default ApiIntegraion;