Untitled

import { useState } from 'react';
import { BodyLong, Heading, Panel, Pagination, Loader } from '@navikt/ds-react';

import { useGetJobAdsQuery } from '../../jobads/jobadsApi';
import { Header } from '../header/Header';
import { formatDate } from '../../utilities/dateFormater';

import '@navikt/ds-css';

interface JobAd {
	id: string;
	title: string;
	jobTitle: string;
	extent: string;
	expires: string;
	description: string;
}

interface JobAdsQueryResponse {
	content: JobAd[];
}

export const JobAds = () => {
	const { data } = useGetJobAdsQuery<JobAdsQueryResponse>('');
	const [pageState, setPageState] = useState(2);

	return (
		<>
			<Header title="NAV jobbannonser" />
			{data ? (
				<div style={{ marginTop: '10rem' }}>
					{(data as JobAdsQueryResponse).content.map((jobAd) => (
						<Panel
							border
							style={{
								margin: '1rem',
								padding: '1rem',
								width: '100%',
								maxWidth: '600px',
							}}
						>
							<Heading level="3" size="medium">
								{jobAd.title}
							</Heading>
							<BodyLong>
								{jobAd.title}
								<br />
								{jobAd.extent}
								<br />
								{formatDate(jobAd.expires)}
							</BodyLong>
						</Panel>
					))}
				</div>
			) : (
				<div
					style={{
						display: 'flex',
						justifyContent: 'center',
						alignItems: 'center',
						height: '100vh',
					}}
				>
					<Loader size="3xlarge" title="Laster..." />
				</div>
			)}
			<div
				style={{
					display: 'flex',
					justifyContent: 'center',
					alignItems: 'center',
				}}
			>
				<Pagination page={pageState} onPageChange={(x) => setPageState(x)} count={9} boundaryCount={1} siblingCount={1} />
			</div>
		</>
	);
};