Skip to content

N
nextjs-starter-template
Commit 1f995f9b by Moorthy G
Options

chore: upgrade dependencies

parent 890a4d44
Showing with 310 additions and 313 deletions
.npmrc
public-hoist-pattern[]=*@nextui-org/* public-hoist-pattern[]=*@heroui/*
.storybook/preview.tsx
import React from 'react'; import React from 'react';
import { themes } from '@storybook/theming'; import { themes } from '@storybook/theming';
import { NextUIProvider } from '@nextui-org/react'; import { HeroUIProvider } from "@heroui/react";
import './style.css'; import './style.css';
import '@/styles/globals.css'; import '@/styles/globals.css';
import type { Preview } from '@storybook/react'; import type { Preview } from '@storybook/react';
const decorators: Preview['decorators'] = [ const decorators: Preview['decorators'] = [
(Story, { globals: { locale, disableAnimation } }) => { (Story, { globals: { locale, disableAnimation } }) => {
const direction = const direction =
// @ts-ignore // @ts-ignore
locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl' locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'rtl' ? 'rtl'
: undefined; : undefined;
return ( return (
<NextUIProvider locale={locale} disableAnimation={disableAnimation}> <HeroUIProvider locale={locale} disableAnimation={disableAnimation}>
<div className="bg-dark" lang={locale} dir={direction}> <div className="bg-dark" lang={locale} dir={direction}>
<Story /> <Story />
</div> </div>
</NextUIProvider> </HeroUIProvider>
); );
} }
]; ];
const parameters: Preview['parameters'] = { const parameters: Preview['parameters'] = {
actions: { argTypesRegex: '^on[A-Z].*' }, actions: { argTypesRegex: '^on[A-Z].*' },
options: { options: {
storySort: { storySort: {
method: 'alphabetical', method: 'alphabetical',
order: ['Foundations'] order: ['Foundations']
} }
}, },
controls: { controls: {
matchers: { matchers: {
color: /(background|color)$/i, color: /(background|color)$/i,
date: /Date$/i date: /Date$/i
} }
}, },
darkMode: { darkMode: {
current: 'dark', current: 'dark',
stylePreview: true, stylePreview: true,
darkClass: 'dark', darkClass: 'dark',
lightClass: 'light', lightClass: 'light',
classTarget: 'html', classTarget: 'html',
dark: { dark: {
...themes.dark, ...themes.dark,
appBg: '#161616', appBg: '#161616',
barBg: 'black', barBg: 'black',
background: 'black', background: 'black',
appContentBg: 'black', appContentBg: 'black',
appBorderRadius: 14 appBorderRadius: 14
}, },
light: { light: {
...themes.light ...themes.light
} }
} }
}; };
const globalTypes: Preview['globalTypes'] = { const globalTypes: Preview['globalTypes'] = {
locale: { locale: {
toolbar: { toolbar: {
icon: 'globe', icon: 'globe',
items: ['en', 'ar'].map((locale) => ({ items: ['en', 'ar'].map((locale) => ({
value: locale, value: locale,
title: new Intl.DisplayNames(undefined, { type: 'language' }).of( title: new Intl.DisplayNames(undefined, { type: 'language' }).of(
locale locale
), ),
right: right:
// @ts-ignore // @ts-ignore
new Intl.Locale(locale)?.textInfo?.direction === 'rtl' new Intl.Locale(locale)?.textInfo?.direction === 'rtl'
? 'Right to Left' ? 'Right to Left'
: undefined : undefined
})) }))
} }
}, },
disableAnimation: { disableAnimation: {
name: 'Disable Animation', name: 'Disable Animation',
description: 'Disable all animations in the stories', description: 'Disable all animations in the stories',
toolbar: { toolbar: {
icon: 'photodrag', icon: 'photodrag',
items: [ items: [
{ value: true, title: 'True' }, { value: true, title: 'True' },
{ value: false, title: 'False' } { value: false, title: 'False' }
] ]
} }
} }
}; };
const preview: Preview = { const preview: Preview = {
decorators, decorators,
parameters, parameters,
globalTypes globalTypes
}; };
export default preview; export default preview;
README.md
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
- React Storybook - React Storybook
- Typescript - Typescript
- Tailwind CSS - Tailwind CSS
- Hero UI
- pnpm - pnpm
- Commitizen - Commitizen
- Editorconfig - Editorconfig
......
app/another/page.tsx
import Link from 'next/link'; import Link from 'next/link';
import { Button } from '@nextui-org/button'; import { Button } from "@heroui/button";
const AnotherPage = () => { const AnotherPage = () => {
return ( return (
<div className="container m-auto"> <div className="container m-auto">
<center className="p-10"> <center className="p-10">
<h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5"> <h3 className="text-3xl text-gray-600 font-semibold mb-5 px-5">
You&lsquo;ve landed on another page You&lsquo;ve landed on another page
</h3> </h3>
<Button as={Link} href="/" color="primary" size="lg"> <Button as={Link} href="/" color="primary" size="lg">
Navigate home page Navigate home page
</Button> </Button>
</center> </center>
</div> </div>
); );
}; };
export default AnotherPage; export default AnotherPage;
app/page.tsx
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { Button } from '@nextui-org/button'; import { Button } from '@heroui/button';
const HomePage = () => { const HomePage = () => {
return ( return (
...@@ -35,8 +35,8 @@ const HomePage = () => { ...@@ -35,8 +35,8 @@ const HomePage = () => {
className="w-24" className="w-24"
/> />
<Image <Image
src="/img/next-ui.svg" src="/img/hero-ui.svg"
alt="NextUI" alt="HeroUI"
width={180} width={180}
height={180} height={180}
className="w-24" className="w-24"
......
components/base/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { Button } from '@nextui-org/button'; import { Button } from "@heroui/button";
import type { ButtonProps } from '@nextui-org/button'; import type { ButtonProps } from "@heroui/button";
const meta: Meta<typeof Button> = { const meta: Meta<typeof Button> = {
title: 'Basic/Button', title: 'Basic/Button',
component: Button, component: Button,
tags: ['autodocs'] tags: ['autodocs']
}; };
export default meta; export default meta;
type Story = StoryObj<typeof meta>; type Story = StoryObj<typeof meta>;
type TemplateProps = { type TemplateProps = {
color: ButtonProps['color']; color: ButtonProps['color'];
}; };
const Template = ({ color }: TemplateProps) => { const Template = ({ color }: TemplateProps) => {
return ( return (
<div> <div>
<h6 className="mb-2 font-semibold">Size</h6> <h6 className="mb-2 font-semibold">Size</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm"> <Button color={color} size="sm">
Small button Small button
</Button> </Button>
<Button color={color} size="md"> <Button color={color} size="md">
Medium button Medium button
</Button> </Button>
<Button color={color} size="lg"> <Button color={color} size="lg">
Large button Large button
</Button> </Button>
<Button color={color} size="sm" variant="ghost"> <Button color={color} size="sm" variant="ghost">
Small Outline Small Outline
</Button> </Button>
<Button color={color} size="md" variant="ghost"> <Button color={color} size="md" variant="ghost">
Medium Outline Medium Outline
</Button> </Button>
<Button color={color} size="lg" variant="ghost"> <Button color={color} size="lg" variant="ghost">
Large Outline Large Outline
</Button> </Button>
</div> </div>
<h6 className="mb-2 font-semibold">Loading</h6> <h6 className="mb-2 font-semibold">Loading</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isLoading> <Button color={color} size="sm" isLoading>
Small button Small button
</Button> </Button>
<Button color={color} size="md" isLoading> <Button color={color} size="md" isLoading>
Medium button Medium button
</Button> </Button>
<Button color={color} size="lg" isLoading> <Button color={color} size="lg" isLoading>
Large button Large button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" isLoading> <Button color={color} size="sm" variant="ghost" isLoading>
Small Outline Small Outline
</Button> </Button>
<Button color={color} size="md" variant="ghost" isLoading> <Button color={color} size="md" variant="ghost" isLoading>
Medium Outline Medium Outline
</Button> </Button>
<Button color={color} size="lg" variant="ghost" isLoading> <Button color={color} size="lg" variant="ghost" isLoading>
Large Outline Large Outline
</Button> </Button>
</div> </div>
<h6 className="mb-2 font-semibold">Disabled</h6> <h6 className="mb-2 font-semibold">Disabled</h6>
<div className="flex gap-5 mb-4 flex-wrap items-center"> <div className="flex gap-5 mb-4 flex-wrap items-center">
<Button color={color} size="sm" isDisabled> <Button color={color} size="sm" isDisabled>
Small button Small button
</Button> </Button>
<Button color={color} size="md" isDisabled> <Button color={color} size="md" isDisabled>
Medium button Medium button
</Button> </Button>
<Button color={color} size="lg" isDisabled> <Button color={color} size="lg" isDisabled>
Large button Large button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" isDisabled> <Button color={color} size="sm" variant="ghost" isDisabled>
Small Outline Small Outline
</Button> </Button>
<Button color={color} size="md" variant="ghost" isDisabled> <Button color={color} size="md" variant="ghost" isDisabled>
Medium Outline Medium Outline
</Button> </Button>
<Button color={color} size="lg" variant="ghost" isDisabled> <Button color={color} size="lg" variant="ghost" isDisabled>
Large Outline Large Outline
</Button> </Button>
</div> </div>
<h6 className="mb-2 font-semibold">Full Width</h6> <h6 className="mb-2 font-semibold">Full Width</h6>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<Button color={color} size="sm" fullWidth> <Button color={color} size="sm" fullWidth>
Small button Small button
</Button> </Button>
<Button color={color} size="md" fullWidth> <Button color={color} size="md" fullWidth>
Medium button Medium button
</Button> </Button>
<Button color={color} size="lg" fullWidth> <Button color={color} size="lg" fullWidth>
Large button Large button
</Button> </Button>
<Button color={color} size="sm" variant="ghost" fullWidth> <Button color={color} size="sm" variant="ghost" fullWidth>
Small Outline Small Outline
</Button> </Button>
<Button color={color} size="md" variant="ghost" fullWidth> <Button color={color} size="md" variant="ghost" fullWidth>
Medium Outline Medium Outline
</Button> </Button>
<Button color={color} size="lg" variant="ghost" fullWidth> <Button color={color} size="lg" variant="ghost" fullWidth>
Large Outline Large Outline
</Button> </Button>
</div> </div>
</div> </div>
); );
}; };
export const Default: Story = { export const Default: Story = {
render: () => <Template color="default" /> render: () => <Template color="default" />
}; };
export const Primary: Story = { export const Primary: Story = {
render: () => <Template color="primary" /> render: () => <Template color="primary" />
}; };
export const Secondary: Story = { export const Secondary: Story = {
render: () => <Template color="secondary" /> render: () => <Template color="secondary" />
}; };
export const Success: Story = { export const Success: Story = {
render: () => <Template color="success" /> render: () => <Template color="success" />
}; };
export const Warning: Story = { export const Warning: Story = {
render: () => <Template color="warning" /> render: () => <Template color="warning" />
}; };
export const Danger: Story = { export const Danger: Story = {
render: () => <Template color="danger" /> render: () => <Template color="danger" />
}; };
components/layout/PageNotFound/PageNotFound.tsx
import Image from 'next/image'; import Image from 'next/image';
import { Button } from '@nextui-org/button'; import { Button } from "@heroui/button";
import FourOhFour from './img/404.png'; import FourOhFour from './img/404.png';
export default function PageNotFound() { export default function PageNotFound() {
return ( return (
<div className="flex flex-col justify-center items-center"> <div className="flex flex-col justify-center items-center">
<Image src={FourOhFour} alt="404, Page Not Found!" /> <Image src={FourOhFour} alt="404, Page Not Found!" />
<Button href="/" color="primary" size="md"> <Button href="/" color="primary" size="md">
Back to Home Back to Home
</Button> </Button>
</div> </div>
); );
} }
components/layout/Providers/Providers.tsx
'use client'; 'use client';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { NextUIProvider } from '@nextui-org/react'; import { HeroUIProvider } from "@heroui/react";
type ProvidersProps = { type ProvidersProps = {
children: React.ReactNode; children: React.ReactNode;
}; };
const Providers: React.FC<ProvidersProps> = ({ children }) => { const Providers: React.FC<ProvidersProps> = ({ children }) => {
const router = useRouter(); const router = useRouter();
return <NextUIProvider navigate={router.push}>{children}</NextUIProvider>; return <HeroUIProvider navigate={router.push}>{children}</HeroUIProvider>;
}; };
export default Providers; export default Providers;
package.json
...@@ -11,43 +11,43 @@ ...@@ -11,43 +11,43 @@
"analyze": "cross-env ANALYZE=true next build" "analyze": "cross-env ANALYZE=true next build"
}, },
"dependencies": { "dependencies": {
"@nextui-org/react": "^2.6.8", "@heroui/react": "2.6.14",
"@types/node": "^22.10.2", "@types/node": "^22.13.1",
"@types/react": "^19.0.1", "@types/react": "^19.0.8",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"color2k": "^2.0.3", "color2k": "^2.0.3",
"framer-motion": "^11.15.0", "framer-motion": "^12.4.2",
"next": "^15.1.0", "next": "^15.1.7",
"postcss": "^8.4.49", "postcss": "^8.5.2",
"react": "^19.0.0", "react": "^19.0.0",
"react-dom": "^19.0.0", "react-dom": "^19.0.0",
"sharp": "^0.33.5", "sharp": "^0.33.5",
"tailwindcss": "^3.4.16", "tailwindcss": "^3.4.1",
"typescript": "^5.7.2" "typescript": "^5.7.3"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "^19.6.1", "@commitlint/cli": "^19.7.1",
"@commitlint/config-conventional": "^19.6.0", "@commitlint/config-conventional": "^19.7.1",
"@storybook/addon-essentials": "^8.4.7", "@storybook/addon-essentials": "^8.5.4",
"@storybook/addon-interactions": "8.4.7", "@storybook/addon-interactions": "8.5.4",
"@storybook/addon-links": "^8.4.7", "@storybook/addon-links": "^8.5.4",
"@storybook/addon-onboarding": "8.4.7", "@storybook/addon-onboarding": "8.5.4",
"@storybook/blocks": "8.4.7", "@storybook/blocks": "8.5.4",
"@storybook/nextjs": "^8.4.7", "@storybook/nextjs": "^8.5.4",
"@storybook/react": "8.4.7", "@storybook/react": "8.5.4",
"@storybook/test": "8.4.7", "@storybook/test": "8.5.4",
"@storybook/theming": "^8.4.7", "@storybook/theming": "^8.5.4",
"@types/eslint": "^9.6.1", "@types/eslint": "^9.6.1",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"cz-conventional-changelog": "^3.3.0", "cz-conventional-changelog": "^3.3.0",
"eslint": "^9.17.0", "eslint": "^9.20.1",
"eslint-config-next": "^15.1.0", "eslint-config-next": "^15.1.7",
"eslint-plugin-storybook": "^0.11.1", "eslint-plugin-storybook": "^0.11.2",
"husky": "^9.1.7", "husky": "^9.1.7",
"prettier": "^3.4.2", "prettier": "^3.5.0",
"pretty-quick": "^4.0.0", "pretty-quick": "^4.0.0",
"storybook": "^8.4.7", "storybook": "^8.5.4",
"storybook-dark-mode": "^4.0.2", "storybook-dark-mode": "^4.0.2",
"webpack-bundle-analyzer": "^4.10.2" "webpack-bundle-analyzer": "^4.10.2"
} }
......
pnpm-lock.yaml
This source diff could not be displayed because it is too large. You can view the blob instead.
postcss.config.js
module.exports = { module.exports = {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
} };
public/img/hero-ui.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 384 96"><path d="M374.28 93.12V0.959961H383.688V93.12H374.28Z" fill="currentColor"></path><path d="M319.093 95.04C312.053 95.04 305.824 93.5893 300.405 90.688C295.029 87.7866 290.805 83.6906 287.733 78.4C284.661 73.1093 283.125 66.9226 283.125 59.84V1.02396L292.597 0.959961V58.624C292.597 63.4026 293.408 67.5413 295.029 71.04C296.65 74.496 298.762 77.3546 301.365 79.616C304.01 81.8346 306.89 83.4773 310.005 84.544C313.12 85.6106 316.149 86.144 319.093 86.144C322.08 86.144 325.13 85.6106 328.245 84.544C331.36 83.4773 334.218 81.8346 336.821 79.616C339.424 77.3546 341.536 74.496 343.157 71.04C344.778 67.5413 345.589 63.4026 345.589 58.624V0.959961H355.061V59.84C355.061 66.9226 353.525 73.1093 350.453 78.4C347.381 83.648 343.136 87.744 337.717 90.688C332.341 93.5893 326.133 95.04 319.093 95.04Z" fill="currentColor"></path><path d="M236.239 95.04C229.37 95.04 223.503 93.4827 218.639 90.368C213.775 87.2534 210.042 82.944 207.439 77.44C204.836 71.936 203.535 65.6214 203.535 58.496C203.535 51.2427 204.858 44.8854 207.503 39.424C210.148 33.9627 213.903 29.7173 218.767 26.688C223.674 23.616 229.498 22.08 236.239 22.08C243.151 22.08 249.039 23.6373 253.903 26.752C258.81 29.824 262.543 34.112 265.103 39.616C267.706 45.0774 269.007 51.3707 269.007 58.496C269.007 65.7494 267.706 72.128 265.103 77.632C262.5 83.0934 258.746 87.36 253.839 90.432C248.932 93.504 243.066 95.04 236.239 95.04ZM236.239 86.016C243.919 86.016 249.636 83.4773 253.391 78.4C257.146 73.28 259.023 66.6454 259.023 58.496C259.023 50.1333 257.124 43.4773 253.327 38.528C249.572 33.5787 243.876 31.104 236.239 31.104C231.076 31.104 226.81 32.2773 223.439 34.624C220.111 36.928 217.615 40.1494 215.951 44.288C214.33 48.384 213.519 53.12 213.519 58.496C213.519 66.816 215.439 73.4933 219.279 78.528C223.119 83.52 228.772 86.016 236.239 86.016Z" fill="currentColor"></path><path d="M162.5 93.12V24H170.948V40.64L169.284 38.464C170.052 36.416 171.055 34.5387 172.292 32.832C173.529 31.0827 174.873 29.6533 176.324 28.544C178.116 26.9653 180.207 25.7707 182.596 24.96C184.985 24.1067 187.396 23.616 189.828 23.488C192.26 23.3173 194.479 23.488 196.484 24V32.832C193.967 32.192 191.215 32.0427 188.228 32.384C185.241 32.7253 182.489 33.92 179.972 35.968C177.668 37.76 175.94 39.9147 174.788 42.432C173.636 44.9067 172.868 47.552 172.484 50.368C172.1 53.1413 171.908 55.8933 171.908 58.624V93.12H162.5Z" fill="currentColor"></path><path d="M116.873 95.04C110.132 95.04 104.286 93.5467 99.337 90.56C94.4304 87.5734 90.6117 83.3707 87.881 77.952C85.1504 72.5334 83.785 66.176 83.785 58.88C83.785 51.328 85.129 44.8 87.817 39.296C90.505 33.792 94.281 29.5467 99.145 26.56C104.052 23.5733 109.833 22.08 116.489 22.08C123.316 22.08 129.14 23.6587 133.961 26.816C138.782 29.9307 142.43 34.4107 144.905 40.256C147.38 46.1014 148.51 53.0773 148.297 61.184H138.697V57.856C138.526 48.896 136.585 42.1333 132.873 37.568C129.204 33.0027 123.828 30.72 116.745 30.72C109.321 30.72 103.625 33.1307 99.657 37.952C95.7317 42.7734 93.769 49.6427 93.769 58.56C93.769 67.264 95.7317 74.0267 99.657 78.848C103.625 83.6267 109.236 86.016 116.489 86.016C121.438 86.016 125.748 84.8853 129.417 82.624C133.129 80.32 136.052 77.0134 138.185 72.704L146.953 76.096C144.222 82.112 140.19 86.784 134.857 90.112C129.566 93.3974 123.572 95.04 116.873 95.04ZM99 61.184V53.312H143.241V61.184H99Z" fill="currentColor"></path><path d="M0 93.12V0.959961H9.408V42.496H60.352V0.959961H69.696V93.12H60.352V51.52H9.408V93.12H0Z" fill="currentColor"></path></svg>
public/img/next-ui.svg deleted 100644 → 0
<svg width="110" height="23" viewBox="0 0 110 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.4154 1.42847V20.5656H42.6892L31.2113 4.54013H31.0595V20.5656H29.2856V1.42847H31.0026L42.5184 17.4726H42.6701V1.42847H44.4154ZM55.1154 20.8652C53.7558 20.8652 52.5796 20.5522 51.5867 19.9261C50.5845 19.2896 49.7867 18.3854 49.2864 17.3191C48.7458 16.2071 48.4755 14.9254 48.4755 13.4739C48.4755 12.0285 48.7458 10.7438 49.2864 9.61956C49.7777 8.55303 50.5549 7.63873 51.5346 6.97511C52.5177 6.32921 53.6779 5.99501 54.8594 6.01735C55.6418 6.01559 56.4174 6.15957 57.1455 6.44171C57.8903 6.73251 58.5643 7.17513 59.1233 7.74054C59.7375 8.36859 60.2111 9.11668 60.5133 9.9364C60.8548 10.8178 61.0256 11.8597 61.0256 13.0621V13.8845H51.257V12.4174H59.2988C59.3125 11.5551 59.1191 10.7018 58.7343 9.92715C58.3817 9.21532 57.8411 8.61011 57.1692 8.17505C56.4528 7.73954 55.6244 7.51593 54.7827 7.53084C53.9409 7.54574 53.1212 7.79852 52.4211 8.25911C51.714 8.75103 51.1472 9.41392 50.7753 10.184C50.3758 10.9999 50.1698 11.8946 50.173 12.8004V13.6788C50.173 14.8188 50.3737 15.814 50.7753 16.6643C51.14 17.4723 51.7346 18.1587 52.4872 18.6406C53.2271 19.1078 54.1029 19.3414 55.1148 19.3414C55.7355 19.3537 56.3527 19.2457 56.9312 19.0236C57.4252 18.8299 57.8738 18.5389 58.2497 18.1686C58.5941 17.8291 58.8694 17.4279 59.0606 16.9865L60.6637 17.5004C60.4272 18.128 60.0568 18.6984 59.5775 19.173C59.0432 19.7046 58.4039 20.1228 57.6992 20.4017C56.8778 20.7236 55.9995 20.8812 55.1155 20.8652H55.1154ZM65.3981 6.21273L69.1545 12.3332L72.9109 6.21273H74.8744L70.1884 13.389L74.8744 20.5653H72.9109L69.1545 14.6413L65.3981 20.5656H63.444L68.0731 13.3894L63.444 6.21311L65.3981 6.21273ZM84.1611 6.21273V7.66117H77.2079V6.21273H84.1611ZM79.3803 2.77408H81.0782V16.8185C81.0782 17.4165 81.1826 17.8853 81.3913 18.2249C81.5776 18.5448 81.8637 18.7971 82.207 18.9444C82.5461 19.0853 82.9108 19.1569 83.2789 19.1546C83.4695 19.157 83.66 19.1429 83.8481 19.1125C84.0061 19.0845 84.1452 19.0549 84.2655 19.0238L84.6258 20.5282C84.428 20.6002 84.2251 20.6579 84.0187 20.7011C83.7252 20.759 83.4263 20.7856 83.127 20.7804C82.5079 20.7806 81.8968 20.6432 81.339 20.3786C80.7686 20.1123 80.2819 19.699 79.9304 19.1825C79.5636 18.653 79.3802 17.9958 79.3802 17.2108L79.3803 2.77408ZM101.292 1.42847H103.066V14.0994C103.086 15.3247 102.765 16.532 102.136 17.5895C101.516 18.6145 100.622 19.4518 99.5514 20.0097C98.4478 20.5984 97.1656 20.8928 95.7049 20.8928C94.2504 20.8928 92.9698 20.5969 91.8632 20.0052C90.7918 19.4465 89.8963 18.6096 89.2735 17.5851C88.6445 16.5295 88.3229 15.3235 88.3439 14.0997V1.42847H90.1177V13.9779C90.1007 14.9272 90.3396 15.8639 90.8102 16.6925C91.2693 17.4843 91.9446 18.1334 92.7595 18.5661C93.5974 19.0208 94.5792 19.2482 95.7049 19.2482C96.8306 19.2482 97.8139 19.0208 98.655 18.5661C99.4714 18.1352 100.147 17.4856 100.605 16.6924C101.072 15.8628 101.31 14.9265 101.292 13.9778L101.292 1.42847ZM110 1.42847V20.5656H108.227V1.42847H110Z" fill="black"/>
<path d="M16.5441 0H5.95589C2.66654 0 0 2.66654 0 5.95589V16.5441C0 19.8335 2.66654 22.5 5.95589 22.5H16.5441C19.8335 22.5 22.5 19.8335 22.5 16.5441V5.95589C22.5 2.66654 19.8335 0 16.5441 0Z" fill="black"/>
<path d="M12.3517 6.48096H13.2266V12.8253C13.2368 13.4388 13.0782 14.0433 12.7681 14.5727C12.4623 15.086 12.0213 15.5052 11.4932 15.7846C10.9489 16.0793 10.3164 16.2267 9.59577 16.2267C8.87838 16.2267 8.24669 16.0785 7.70071 15.7822C7.17244 15.5024 6.73085 15.0833 6.42381 14.5704C6.11357 14.0418 5.95494 13.438 5.96532 12.8253V6.48096H6.84042V12.7644C6.83199 13.2397 6.94985 13.7087 7.18195 14.1236C7.40832 14.52 7.74135 14.845 8.14319 15.0617C8.5563 15.2894 9.04055 15.4032 9.59595 15.4032C10.1514 15.4032 10.6364 15.2894 11.051 15.0617C11.4536 14.846 11.7869 14.5207 12.0125 14.1236C12.2431 13.7083 12.3601 13.2394 12.3517 12.7644V6.48096ZM16.6467 6.48096V16.0629H15.7718V6.48096H16.6467Z" fill="white"/>
</svg>
tailwind.config.ts
import { nextui } from '@nextui-org/react'; import { heroui } from '@heroui/react';
import colors from './theme/colors'; import colors from './theme/colors';
import type { Config } from 'tailwindcss'; import type { Config } from 'tailwindcss';
...@@ -9,7 +9,7 @@ const config: Config = { ...@@ -9,7 +9,7 @@ const config: Config = {
'./components/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}',
'./theme/**/*.{js,ts,jsx,tsx,mdx}', './theme/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}' './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'
], ],
theme: { theme: {
extend: { extend: {
...@@ -20,7 +20,7 @@ const config: Config = { ...@@ -20,7 +20,7 @@ const config: Config = {
}, },
darkMode: 'class', darkMode: 'class',
plugins: [ plugins: [
nextui({ heroui({
themes: { themes: {
light: colors.light, light: colors.light,
dark: colors.dark dark: colors.dark
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment