diff --git a/dev/public/images/cat.png b/dev/public/images/cat.png new file mode 100644 index 0000000..ffc4b56 Binary files /dev/null and b/dev/public/images/cat.png differ diff --git a/dev/src/app/components/avatars/layout.tsx b/dev/src/app/components/avatars/layout.tsx new file mode 100644 index 0000000..49addd2 --- /dev/null +++ b/dev/src/app/components/avatars/layout.tsx @@ -0,0 +1,14 @@ +import { PageTitle } from '@/pageComponents/PageWrapper' +import React from 'react' + +export default function RootLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/dev/src/app/components/avatars/page.tsx b/dev/src/app/components/avatars/page.tsx index eab2449..084d6df 100644 --- a/dev/src/app/components/avatars/page.tsx +++ b/dev/src/app/components/avatars/page.tsx @@ -1,65 +1,27 @@ import { Avatar } from '@/index' -import { PageWrapper } from '@/pageComponents/PageWrapper' +import { Section } from '@/pageComponents/Section' import React from 'react' export default function badges() { return ( - -
-
-
-

Sqround

- -
+ +
+ + + +
-
-

Round

- -
+
+ + + +
-
-

Square

- -
-
- -
-

Army of ducks

- -
- - - - - - - - - - - - - - - - - - -
-
-
- +
+ + + +
+ ) } diff --git a/dev/src/app/components/badges/layout.tsx b/dev/src/app/components/badges/layout.tsx new file mode 100644 index 0000000..84d4b47 --- /dev/null +++ b/dev/src/app/components/badges/layout.tsx @@ -0,0 +1,14 @@ +import { PageTitle } from '@/pageComponents/PageWrapper' +import React from 'react' + +export default function RootLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/dev/src/app/components/badges/page.tsx b/dev/src/app/components/badges/page.tsx index 8117494..732e12c 100644 --- a/dev/src/app/components/badges/page.tsx +++ b/dev/src/app/components/badges/page.tsx @@ -11,11 +11,10 @@ import { } from 'react-icons/bs' import React from 'react' import { Badge } from '@/index' -import { PageWrapper } from '@/pageComponents/PageWrapper' export default function badges() { return ( - +
- + ) } diff --git a/dev/src/app/components/buttons/icons_only/page.tsx b/dev/src/app/components/buttons/icons_only/page.tsx new file mode 100644 index 0000000..145d8da --- /dev/null +++ b/dev/src/app/components/buttons/icons_only/page.tsx @@ -0,0 +1,60 @@ +import { Button } from '@/components/button/Button' +import React from 'react' +import { + BsCalendarEventFill, + BsCartFill, + BsCheckCircleFill, + BsDoorOpenFill, + BsExclamationTriangleFill, + BsFillExclamationCircleFill, + BsHandIndexFill, + BsInfoSquareFill, + BsLink, + BsXCircleFill +} from 'react-icons/bs' + +export default function page() { + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/dev/src/app/components/buttons/layout.tsx b/dev/src/app/components/buttons/layout.tsx new file mode 100644 index 0000000..29537a9 --- /dev/null +++ b/dev/src/app/components/buttons/layout.tsx @@ -0,0 +1,14 @@ +import { PageTitle } from '@/pageComponents/PageWrapper' +import React from 'react' + +export default function RootLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/dev/src/app/components/buttons/page.tsx b/dev/src/app/components/buttons/page.tsx index 1d22977..db49a21 100644 --- a/dev/src/app/components/buttons/page.tsx +++ b/dev/src/app/components/buttons/page.tsx @@ -1,24 +1,11 @@ -import { - BsCalendarEventFill, - BsCartFill, - BsCheckCircleFill, - BsDoorOpenFill, - BsExclamationTriangleFill, - BsFillExclamationCircleFill, - BsHandIndexFill, - BsInfoSquareFill, - BsLink, - BsTrashFill, - BsXCircleFill -} from 'react-icons/bs' +import { BsCartFill, BsCheckCircleFill, BsTrashFill } from 'react-icons/bs' import React from 'react' import { Button } from '@/index' -import { PageWrapper } from '@/pageComponents/PageWrapper' import { Section } from '@/pageComponents/Section' export default function buttons() { return ( - +
@@ -42,48 +29,14 @@ export default function buttons() {
-
-

Icons only

+
- - - - - - - - - - - - -
- + + ) } diff --git a/dev/src/app/components/buttons/regular/page.tsx b/dev/src/app/components/buttons/regular/page.tsx index 7b2f0d9..cb667dd 100644 --- a/dev/src/app/components/buttons/regular/page.tsx +++ b/dev/src/app/components/buttons/regular/page.tsx @@ -1,10 +1,9 @@ import { Button } from '@/components/button/Button' -import { PageWrapper } from '@/pageComponents/PageWrapper' import React from 'react' export default function page() { return ( - + @@ -18,6 +17,6 @@ export default function page() { - + ) } diff --git a/dev/src/app/components/buttons/with_icon/page.tsx b/dev/src/app/components/buttons/with_icon/page.tsx index 3e9093b..18ffb30 100644 --- a/dev/src/app/components/buttons/with_icon/page.tsx +++ b/dev/src/app/components/buttons/with_icon/page.tsx @@ -1,5 +1,4 @@ import { Button } from '@/components/button/Button' -import { PageWrapper } from '@/pageComponents/PageWrapper' import React from 'react' import { BsCalendarEventFill, @@ -16,7 +15,7 @@ import { export default function page() { return ( - + @@ -67,6 +66,6 @@ export default function page() { Link - + ) } diff --git a/dev/src/app/components/layout.tsx b/dev/src/app/components/layout.tsx index c82b1d3..f4134a5 100644 --- a/dev/src/app/components/layout.tsx +++ b/dev/src/app/components/layout.tsx @@ -1,5 +1,6 @@ import { NavBar } from '@/pageComponents/NavBar' import { PageWrapper } from '@/pageComponents/PageWrapper' +import React from 'react' export default function RootLayout({ children @@ -7,11 +8,9 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - - - {children} - - + + + {children} + ) } diff --git a/dev/src/app/components/modals/layout.tsx b/dev/src/app/components/modals/layout.tsx new file mode 100644 index 0000000..5790722 --- /dev/null +++ b/dev/src/app/components/modals/layout.tsx @@ -0,0 +1,14 @@ +import { PageTitle } from '@/pageComponents/PageWrapper' +import React from 'react' + +export default function RootLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/dev/src/app/components/modals/page.tsx b/dev/src/app/components/modals/page.tsx index 13b385e..cf5dcaf 100644 --- a/dev/src/app/components/modals/page.tsx +++ b/dev/src/app/components/modals/page.tsx @@ -1,12 +1,11 @@ import { ModalBox, ModalActionWrapper, ModalButton } from '@/index' -import { PageWrapper } from '@/pageComponents/PageWrapper' import Link from 'next/link' import React from 'react' const WelcomeModal = () => { const id = 'WelcomeModal' return ( - <> + Welcome @@ -39,14 +38,14 @@ const WelcomeModal = () => { Let's go! - + ) } const NewsModal = () => { const id = 'NewsModal' return ( - <> + News @@ -102,14 +101,14 @@ const NewsModal = () => { - + ) } const WarningModal = () => { const id = 'WarningModal' return ( - <> + Warning @@ -135,14 +134,14 @@ const WarningModal = () => { - + ) } const SuccessModal = () => { const id = 'SuccessModal' return ( - <> + Success @@ -160,14 +159,14 @@ const SuccessModal = () => { - + ) } const InfoModal = () => { const id = 'InfoModal' return ( - <> + Info @@ -185,13 +184,13 @@ const InfoModal = () => { - + ) } export default function badges() { return ( - +
@@ -199,6 +198,6 @@ export default function badges() {
- + ) } diff --git a/dev/src/app/components/page.tsx b/dev/src/app/components/page.tsx index bf1adad..e4e3668 100644 --- a/dev/src/app/components/page.tsx +++ b/dev/src/app/components/page.tsx @@ -1,6 +1,6 @@ -import { PageWrapper } from '@/pageComponents/PageWrapper' +import { PageTitle } from '@/pageComponents/PageWrapper' import React from 'react' export default function page() { - return + return } diff --git a/dev/src/app/components/servercards/layout.tsx b/dev/src/app/components/servercards/layout.tsx new file mode 100644 index 0000000..6d64b21 --- /dev/null +++ b/dev/src/app/components/servercards/layout.tsx @@ -0,0 +1,14 @@ +import { PageTitle } from '@/pageComponents/PageWrapper' +import React from 'react' + +export default function RootLayout({ + children +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/dev/src/app/components/servercards/page.tsx b/dev/src/app/components/servercards/page.tsx index cb80b1f..4d31aa5 100644 --- a/dev/src/app/components/servercards/page.tsx +++ b/dev/src/app/components/servercards/page.tsx @@ -1,10 +1,9 @@ import { ServerCard } from '@/index' -import { PageWrapper } from '@/pageComponents/PageWrapper' import React from 'react' export default function servercards() { return ( - +

Card without any data

@@ -103,6 +102,6 @@ export default function servercards() { />
- + ) } diff --git a/dev/src/components/button/Button.tsx b/dev/src/components/button/Button.tsx index 5f30f31..fb4ea3d 100644 --- a/dev/src/components/button/Button.tsx +++ b/dev/src/components/button/Button.tsx @@ -49,9 +49,11 @@ export function Button({ loadingIcon, ...props }: buttonParameterType) { - const clsname = `btn gap-2${type ? ` ${type}` : ''}${size ? `${size}` : ''}${ - iconOnly ? ` ${iconOnly}` : '' - }${noAnimation !== undefined ? ' glass' : ''} ${className ?? ''}` + const clsname = `btn no-animation interactive gap-2${type ? ` ${type}` : ''}${ + size ? `${size}` : '' + }${iconOnly ? ` ${iconOnly}` : ''}${ + noAnimation !== undefined ? ' glass' : '' + } ${className ?? ''}` const content = loading && !loadingIcon ? ( diff --git a/dev/src/components/serverCard/ServerCard.tsx b/dev/src/components/serverCard/ServerCard.tsx index 0dae5fb..c159116 100644 --- a/dev/src/components/serverCard/ServerCard.tsx +++ b/dev/src/components/serverCard/ServerCard.tsx @@ -33,7 +33,7 @@ export function ServerCard({ }: cardParameterType) { return (
+ {children} + + ) +} + +export function PageTitle({ title, - description + description, + children }: { - children?: React.ReactNode - title?: string + title: string description?: string + children?: React.ReactNode }) { return ( -
- -
-
-

{title}

+ <> +
+

{title}

+ {description && (

{description}

-
- {children} + )}
-
+ {children} + ) } diff --git a/dev/src/styles/style.scss b/dev/src/styles/style.scss index 34a7a21..7feb7f8 100644 --- a/dev/src/styles/style.scss +++ b/dev/src/styles/style.scss @@ -37,23 +37,20 @@ body { border-radius: 4px; } -.serverCard { - cursor: pointer; - user-select: none; - transition-property: color, background-color, border-color, - text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, - backdrop-filter; - transition-duration: 200ms; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation: button-pop var(--animation-btn, 0.25s) ease-out; - - &:hover { - transform: scale(1.01); +@layer utilities { + .interactive { + transform: scale(1); + transition: transform 0.15s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + user-select: none; } - &:active:hover, - &:active:focus { - animation: none; - transform: scale(0.99); + .interactive:hover { + transform: scale(1.06); + } + .interactive:active:focus, + .interactive:hover:active { + transform: scale(1); } } diff --git a/dev/tailwind.config.js b/dev/tailwind.config.js index 8a423a4..48a9a41 100644 --- a/dev/tailwind.config.js +++ b/dev/tailwind.config.js @@ -19,7 +19,18 @@ module.exports = { info: '#3abff8', success: '#36d399', warning: '#fbbd23', - error: '#f87272' + error: '#f87272', + + '--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes + '--rounded-btn': '999rem', // border radius rounded-btn utility class, used in buttons and similar element + '--rounded-badge': '999rem', // border radius rounded-badge utility class, used in badges and similar + '--animation-btn': '0.25s', // duration of animation when you click on button + '--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc + '--btn-text-case': 'uppercase', // set default text transform for buttons + '--btn-focus-scale': '0.95', // scale transform of button when you focus on it + '--border-btn': '1px', // border width of buttons + '--tab-border': '1px', // border width of tabs + '--tab-radius': '0.5rem' // border radius of tabs } } ],