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

19
.woodpecker/pipeline.yml Normal file
View File

@@ -0,0 +1,19 @@
steps:
- name: build
image: docker:latest
commands:
- docker build -t nwblog:latest .
volumes:
- /var/run/docker.sock:/var/run/docker.sock
when:
- branch: [master, deploy]
- event: [push, manual]
- name: deploy
image: docker:latest
commands:
- docker run -d -p 127.0.0.1:25010:3000 --restart always --name nwblog nwblog:latest
volumes:
- /var/run/docker.sock:/var/run/docker.sock
when:
- branch: deploy
- event: manual

BIN
bun.lockb
View File

Binary file not shown.

8
package.json
View File

@@ -18,14 +18,14 @@
"react-icons": "^5.4.0" "react-icons": "^5.4.0"
}, },
"devDependencies": { "devDependencies": {
"typescript": "^5", "@eslint/eslintrc": "^3",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19", "@types/react": "^19",
"@types/react-dom": "^19", "@types/react-dom": "^19",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^9", "eslint": "^9",
"eslint-config-next": "15.1.5", "eslint-config-next": "15.1.5",
"@eslint/eslintrc": "^3" "postcss": "^8",
"sass": "^1.83.4",
"typescript": "^5"
} }
} }

4
postcss.config.mjs
View File

@@ -1,8 +1,6 @@
/** @type {import('postcss-load-config').Config} */ /** @type {import('postcss-load-config').Config} */
const config = { const config = {
plugins: { plugins: {},
tailwindcss: {},
},
}; };
export default config; export default config;

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

11
src/app/page.tsx
View File

@@ -1,11 +1,18 @@
"use client";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useColorMode, useColorModeValue } from "@/components/ui/color-mode";
import { VStack } from "@chakra-ui/react"; import { VStack } from "@chakra-ui/react";
export default function Home() { export default function Home() {
const { toggleColorMode } = useColorMode();
const color = useColorModeValue("red", "blue");
return ( return (
<VStack> <VStack>
<Button>Test 1</Button> <Button onClick={toggleColorMode}>Test 1</Button>
<Button>Test 2</Button> <Button colorPalette={color} variant="solid">
{color}
</Button>
</VStack> </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 type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
import { import { AbsoluteCenter, Button as ChakraButton, Span, Spinner } from "@chakra-ui/react";
AbsoluteCenter, import * as React from "react";
Button as ChakraButton,
Span,
Spinner,
} from "@chakra-ui/react"
import * as React from "react"
interface ButtonLoadingProps { interface ButtonLoadingProps {
loading?: boolean loading?: boolean;
loadingText?: React.ReactNode loadingText?: React.ReactNode;
} }
export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {} export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
function Button(props, ref) { const { loading, disabled, loadingText, children, ...rest } = props;
const { loading, disabled, loadingText, children, ...rest } = props return (
return ( <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
<ChakraButton disabled={loading || disabled} ref={ref} {...rest}> {loading && !loadingText ? (
{loading && !loadingText ? ( <>
<> <AbsoluteCenter display="inline-flex">
<AbsoluteCenter display="inline-flex">
<Spinner size="inherit" color="inherit" />
</AbsoluteCenter>
<Span opacity={0}>{children}</Span>
</>
) : loading && loadingText ? (
<>
<Spinner size="inherit" color="inherit" /> <Spinner size="inherit" color="inherit" />
{loadingText} </AbsoluteCenter>
</> <Span opacity={0}>{children}</Span>
) : ( </>
children ) : loading && loadingText ? (
)} <>
</ChakraButton> <Spinner size="inherit" color="inherit" />
) {loadingText}
}, </>
) ) : (
children
)}
</ChakraButton>
);
});

18
tailwind.config.ts
View File

@@ -1,18 +0,0 @@
import type { Config } from "tailwindcss";
export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;