@react-three/uikit-default
Version:
Default (shadcn) kit for @react-three/uikit
55 lines (54 loc) • 2.83 kB
JavaScript
import { Container, Text } from '@react-three/uikit';
import { ChevronLeft, ChevronRight, Ellipsis } from '@react-three/uikit-lucide';
import React, { forwardRef } from 'react';
import { borderRadius, colors } from './theme.js';
export const Pagination = forwardRef((props, ref) => {
return React.createElement(Container, { marginX: "auto", flexDirection: "row", width: "100%", justifyContent: "center", ref: ref, ...props });
});
export const PaginationContent = forwardRef((props, ref) => {
return React.createElement(Container, { flexDirection: "row", alignItems: "center", gap: 4, ref: ref, ...props });
});
export const PaginationItem = Container;
const paginationVariants = {
outline: {
containerProps: {
borderWidth: 1,
borderColor: colors.input,
backgroundColor: colors.background,
},
containerHoverProps: {
backgroundColor: colors.accent,
},
}, //TODO: hover:text-accent-foreground",
ghost: {
containerHoverProps: {
backgroundColor: colors.accent,
},
}, // TODO: hover:text-accent-foreground",
};
const paginationSizes = {
default: { height: 40, paddingX: 16, paddingY: 8 },
sm: { height: 36, paddingX: 12 },
lg: { height: 42, paddingX: 32 },
icon: { height: 40, width: 40 },
};
export const PaginationLink = forwardRef(({ isActive = false, size = 'icon', hover, ...props }, ref) => {
const { containerProps, containerHoverProps } = paginationVariants[isActive ? 'outline' : 'ghost'];
const sizeProps = paginationSizes[size];
return (React.createElement(Container, { cursor: "pointer", borderRadius: borderRadius.md, alignItems: "center", justifyContent: "center", hover: { ...containerHoverProps, ...hover }, ref: ref, ...containerProps, ...sizeProps, ...props }));
});
export const PaginationPrevious = forwardRef((props, ref) => {
return (React.createElement(PaginationLink, { flexDirection: "row", size: "default", gap: 4, paddingLeft: 10, ref: ref, ...props },
React.createElement(ChevronLeft, { width: 16, height: 16 }),
React.createElement(Text, null, "Previous")));
});
export const PaginationNext = forwardRef((props, ref) => {
return (React.createElement(PaginationLink, { flexDirection: "row", size: "default", gap: 4, paddingRight: 10, ref: ref, ...props },
React.createElement(Text, null, "Next"),
React.createElement(ChevronRight, { width: 16, height: 16 })));
});
export const PaginationEllipsis = forwardRef((props, ref) => {
return (React.createElement(Container, { flexDirection: "row", height: 36, width: 36, alignItems: "center", justifyContent: "center", ref: ref, ...props },
React.createElement(Ellipsis, { width: 16, height: 16 })));
});
//<span className="sr-only">More pages</span>