FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UIElements/Pagination/BasicPagination.js
+38
View File
@@ -0,0 +1,38 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
export default function BasicPagination() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
BasicPagination
</Typography>
<Stack spacing={2}>
<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />
</Stack>
</Card>
</>
);
}
components/UIElements/Pagination/CustomIcons.js
+46
View File
@@ -0,0 +1,46 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Pagination from '@mui/material/Pagination';
import PaginationItem from '@mui/material/PaginationItem';
import Stack from '@mui/material/Stack';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
export default function CustomIcons() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
CustomIcons
</Typography>
<Stack spacing={2}>
<Pagination
count={10}
renderItem={(item) => (
<PaginationItem
slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
{...item}
/>
)}
/>
</Stack>
</Card>
</>
);
}
components/UIElements/Pagination/OutlinedPagination.js
+38
View File
@@ -0,0 +1,38 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
export default function OutlinedPagination() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Outlined Pagination
</Typography>
<Stack spacing={2}>
<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />
</Stack>
</Card>
</>
);
}
components/UIElements/Pagination/PaginationSize.js
+37
View File
@@ -0,0 +1,37 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
export default function PaginationSize() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
PaginationSize
</Typography>
<Stack spacing={2}>
<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />
</Stack>
</Card>
</>
);
}
components/UIElements/Pagination/RoundedPagination.js
+36
View File
@@ -0,0 +1,36 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';
export default function RoundedPagination() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Rounded Pagination
</Typography>
<Stack spacing={2}>
<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />
</Stack>
</Card>
</>
);
}