neuro_llc/NwBlog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: chakra ui

Browse Source
This commit is contained in:
Sergey Elpashev
2025-01-22 17:02:12 +03:00
parent eb21d5f73d
commit bc5d6097db
11 changed files with 67 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/globals.css
View File

@@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

0
src/app/globals.scss Normal file
View File

6
src/app/layout.tsx
View File

@@ -1,7 +1,7 @@
import { Provider } from "@/components/ui/provider";
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import "./globals.scss";
import Providers from "./providers";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -26,7 +26,7 @@ export default function RootLayout({
return (
<html lang="ru" suppressHydrationWarning>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
<Provider>{children}</Provider>
<Providers>{children}</Providers>
</body>
</html>
);

11
src/app/page.tsx
View File

@@ -1,11 +1,18 @@
"use client";
import { Button } from "@/components/ui/button";
import { useColorMode, useColorModeValue } from "@/components/ui/color-mode";
import { VStack } from "@chakra-ui/react";
export default function Home() {
const { toggleColorMode } = useColorMode();
const color = useColorModeValue("red", "blue");
return (
<VStack>
<Button>Test 1</Button>
<Button>Test 2</Button>
<Button onClick={toggleColorMode}>Test 1</Button>
<Button colorPalette={color} variant="solid">
{color}
</Button>
</VStack>
);
}

5
src/app/providers.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { Provider } from "@/components/ui/provider";
export default function Providers(props: React.PropsWithChildren) {
return <Provider>{props.children}</Provider>;
}

59
src/components/ui/button.tsx
View File

@@ -1,40 +1,33 @@
import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
import {
AbsoluteCenter,
Button as ChakraButton,
Span,
Spinner,
} from "@chakra-ui/react"
import * as React from "react"
import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
import { AbsoluteCenter, Button as ChakraButton, Span, Spinner } from "@chakra-ui/react";
import * as React from "react";
interface ButtonLoadingProps {
loading?: boolean
loadingText?: React.ReactNode
loading?: boolean;
loadingText?: React.ReactNode;
}
export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
function Button(props, ref) {
const { loading, disabled, loadingText, children, ...rest } = props
return (
<ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
{loading && !loadingText ? (
<>
<AbsoluteCenter display="inline-flex">
<Spinner size="inherit" color="inherit" />
</AbsoluteCenter>
<Span opacity={0}>{children}</Span>
</>
) : loading && loadingText ? (
<>
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
const { loading, disabled, loadingText, children, ...rest } = props;
return (
<ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
{loading && !loadingText ? (
<>
<AbsoluteCenter display="inline-flex">
<Spinner size="inherit" color="inherit" />
{loadingText}
</>
) : (
children
)}
</ChakraButton>
)
},
)
</AbsoluteCenter>
<Span opacity={0}>{children}</Span>
</>
) : loading && loadingText ? (
<>
<Spinner size="inherit" color="inherit" />
{loadingText}
</>
) : (
children
)}
</ChakraButton>
);
});