diff --git a/public/images/spinners-dark.svg b/public/images/spinners-dark.svg new file mode 100644 index 000000000..15289cc10 --- /dev/null +++ b/public/images/spinners-dark.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/public/images/spinners-light.svg b/public/images/spinners-light.svg new file mode 100644 index 000000000..ea9ce5405 --- /dev/null +++ b/public/images/spinners-light.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/src/Root.tsx b/src/Root.tsx index b6ac39569..44ac865d1 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -10,6 +10,7 @@ import { HiMenuAlt1, } from 'react-icons/hi'; import { BsGithub } from 'react-icons/bs'; +import { FaSpinner } from 'react-icons/fa'; import { Route, Routes } from 'react-router-dom'; import { DarkThemeToggle, Navbar, Sidebar, SidebarItem, Spinner } from './components'; @@ -20,6 +21,7 @@ const AccordionPage = lazy(() => import('./pages/AccordionPage')); const BadgesPage = lazy(() => import('./pages/BadgesPage')); const BreadcrumbPage = lazy(() => import('./pages/BreadcrumbPage')); const ButtonsPage = lazy(() => import('./pages/ButtonsPage')); +const SpinnersPage = lazy(() => import('./pages/SpinnersPage')); const TooltipsPage = lazy(() => import('./pages/TooltipsPage')); export const Root: FC = () => { @@ -62,6 +64,12 @@ export const Root: FC = () => { title: 'Buttons', href: '/buttons', }, + { + group: false, + icon: FaSpinner, + title: 'Spinners', + href: '/spinners', + }, { group: false, icon: HiDotsCircleHorizontal, @@ -96,7 +104,13 @@ export const Root: FC = () => {
- }> + + +
+ } + > } /> } /> @@ -104,6 +118,7 @@ export const Root: FC = () => { } /> } /> } /> + } /> } /> diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx index 07b8771b7..94a8fdd74 100644 --- a/src/components/Spinner.tsx +++ b/src/components/Spinner.tsx @@ -1,22 +1,49 @@ -import classNames from 'classnames'; import { FC } from 'react'; +import classNames from 'classnames'; + +type Color = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple'; +type Size = 'xs' | 'sm' | 'md' | 'lg'; + +export type SpinnerProps = { + color?: Color; + size?: Size; +}; + +const colorClasses: Record = { + blue: 'fill-blue-600', + gray: 'fill-gray-600 dark:fill-gray-300', + green: 'fill-green-500 dark:text-gray-600', + red: 'fill-red-600', + yellow: 'fill-yellow-400 dark:text-gray-600', + pink: 'fill-pink-600', + purple: 'fill-purple-600', +}; -export type SpinnerProps = { className?: string; fullScreen?: boolean }; +const sizeClasses: Record = { + xs: 'w-4 h-4', + sm: 'w-6 h-6', + md: 'w-8 h-8', + lg: 'w-10 h-10', +}; -export const Spinner: FC = ({ className, fullScreen }) => ( -
= ({ color = 'blue', size = 'md' }) => ( + - - - - -
+ + + ); diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index 0f15e4c2d..ff8d2e8d2 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -43,6 +43,12 @@ const DashboardPage: FC = () => { className: 'w-24', images: { light: 'buttons.svg', dark: 'buttons.svg' }, }, + { + title: 'Spinners', + href: '/spinners', + className: 'w-36', + images: { light: 'spinners-light.svg', dark: 'spinners-dark.svg' }, + }, { title: 'Tooltips', href: '/tooltips', diff --git a/src/pages/SpinnersPage.tsx b/src/pages/SpinnersPage.tsx new file mode 100644 index 000000000..fa2a163be --- /dev/null +++ b/src/pages/SpinnersPage.tsx @@ -0,0 +1,99 @@ +import { FC } from 'react'; +import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; +import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; +import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'; + +import { Card, Spinner } from '../components'; + +SyntaxHighlighter.registerLanguage('tsx', tsx); + +const SpinnersPage: FC = () => { + return ( +
+
+ Default spinner + + + + {``} + + +
+
+ Colors + +
+ + + + + + + +
+ + {` + + + + + + + +`.trim()} + + +
+
+ Sizing + +
+ + + + +
+ + {` + + + + +`.trim()} + + +
+
+ Alignment + +
+
+ +
+
+ +
+
+ +
+
+ + {` +
+ +
+
+ +
+
+ +
+`.trim()} + + +
+
+ ); +}; + +export default SpinnersPage;