Pagination

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Pagination totalPages={10} />
      <Pagination totalPages={10} color='primary' />
      <Pagination totalPages={10} color='secondary' />
      <Pagination totalPages={10} disabled />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Pagination totalPages={5} />
      <Pagination totalPages={5} disabled />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Pagination variant='ghost' totalPages={5} color='primary' />
      <Pagination variant='outlined' totalPages={5} color='primary' />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <Pagination
        totalPages={8}
        shape='pill'
        variant='outlined'
      />
      <Pagination
        totalPages={8}
        shape='pill'
        variant='ghost'
      />
      <Pagination
        totalPages={8}
        shape='rounded'
        variant='outlined'
      />
      <Pagination
        totalPages={8}
        shape='rounded'
        variant='ghost'
      />
      <Pagination
        totalPages={8}
        shape='square'
        variant='outlined'
      />
      <Pagination
        totalPages={8}
        shape='square'
        variant='ghost'
      />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <Pagination
        totalPages={8}
        size='sm'
        color='primary'
      />
      <Pagination
        totalPages={8}
        size='md'
        color='primary'
      />
      <Pagination
        totalPages={8}
        size='lg'
        color='primary'
      />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
import { ChevronFirst, ChevronLast } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center">
      <Pagination
        totalPages={8}
        variant='ghost'
        color='primary'
        showFirstButton
        showLastButton
        firstButtonIcon={<ChevronFirst size={16} />}
        lastButtonIcon={<ChevronLast size={16} />}
      />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
import { ChevronLeftCircle, ChevronRightCircle } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-2">
      <Pagination
        totalPages={8}
        variant='ghost'
        color='primary'
        previousIcon='Previous'
        nextIcon='Next'
      />
      <Pagination
        totalPages={8}
        variant='ghost'
        color='primary'
        previousIcon={<ChevronLeftCircle size={16} />}
        nextIcon={<ChevronRightCircle size={16} />}
      />
    </div>
  );
}

import React from 'react';
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <Pagination
        totalPages={20}
        defaultPage={10}
        color='primary'
        siblingCount={1}
        boundaryCount={1}
      />
      <Pagination
        totalPages={20}
        defaultPage={10}
        color='secondary'
        siblingCount={0}
      />
      <Pagination
        totalPages={20}
        defaultPage={10}
        color='primary'
        siblingCount={0}
        boundaryCount={2}
      />
      <Pagination
        totalPages={20}
        defaultPage={10}
        color='secondary'
        siblingCount={1}
        boundaryCount={2}
      />
      <Pagination
        totalPages={20}
        defaultPage={10}
        color='primary'
        siblingCount={2}
        boundaryCount={3}
      />
    </div>
  );
}

"use client"
 
import React, { useState }  from 'react'
import { Pagination } from 'archi-ui'
 
export default function MyReactPage() {
 
  const [page, setCurrentPage] = useState(3);
 
  const handlePageChange = (page) => {
    setCurrentPage(page)
  }
 
  return (
    <div className="flex items-center justify-center">
      <Pagination
        totalPages={8}
        variant='ghost'
        color='secondary'
        page={page}
        onPageChange={handlePageChange}
      />
    </div>
  );
}