diff --git a/components/Common/NodejsLogo/index.module.css b/components/Common/NodejsLogo/index.module.css new file mode 100644 index 0000000000000..7899c8c8e92e4 --- /dev/null +++ b/components/Common/NodejsLogo/index.module.css @@ -0,0 +1,12 @@ +.nodejsLogoDark { + @apply h-6 + w-20 + dark:hidden; +} + +.nodejsLogoLight { + @apply hidden + h-6 + w-20 + dark:block; +} diff --git a/components/Common/NodejsLogo/index.stories.tsx b/components/Common/NodejsLogo/index.stories.tsx new file mode 100644 index 0000000000000..691b885d1d283 --- /dev/null +++ b/components/Common/NodejsLogo/index.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import NodejsLogo from '@/components/Common/NodejsLogo'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = {}; + +export const WithPride: Story = { + args: { variant: 'pride' }, +}; + +export default { component: NodejsLogo } as Meta; diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx new file mode 100644 index 0000000000000..6fead1ab85adc --- /dev/null +++ b/components/Common/NodejsLogo/index.tsx @@ -0,0 +1,32 @@ +import type { FC } from 'react'; + +import NodejsDark from '@/components/Icons/Logos/NodejsDark'; +import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride'; +import NodejsLight from '@/components/Icons/Logos/NodejsLight'; +import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride'; +import type { LogoVariant } from '@/types'; + +import style from './index.module.css'; + +type NodejsLogoProps = { + variant?: LogoVariant; +}; + +const NodejsLogo: FC = ({ variant = 'default' }) => ( + <> + {variant === 'pride' && ( + <> + + + + )} + {variant === 'default' && ( + <> + + + + )} + +); + +export default NodejsLogo; diff --git a/components/Containers/NavBar/index.module.css b/components/Containers/NavBar/index.module.css index 05b0200f0cbd6..21cdde580c668 100644 --- a/components/Containers/NavBar/index.module.css +++ b/components/Containers/NavBar/index.module.css @@ -33,19 +33,6 @@ flex-1; } -.nodejsLogoDark { - @apply h-6 - w-20 - dark:hidden; -} - -.nodejsLogoLight { - @apply hidden - h-6 - w-20 - dark:block; -} - .navInteractionIcon { @apply size-6; } diff --git a/components/Containers/NavBar/index.tsx b/components/Containers/NavBar/index.tsx index d4e6d9fb3546e..1ce06a1a5d0f6 100644 --- a/components/Containers/NavBar/index.tsx +++ b/components/Containers/NavBar/index.tsx @@ -10,10 +10,9 @@ import LanguageDropdown from '@/components/Common/LanguageDropDown'; import { SearchButton } from '@/components/Common/Search'; import ThemeToggle from '@/components/Common/ThemeToggle'; import NavItem from '@/components/Containers/NavBar/NavItem'; -import NodejsDark from '@/components/Icons/Logos/NodejsDark'; -import NodejsLight from '@/components/Icons/Logos/NodejsLight'; import GitHub from '@/components/Icons/Social/GitHub'; import Link from '@/components/Link'; +import WithNodejsLogo from '@/components/withNodejsLogo'; import type { FormattedMessage } from '@/types'; import style from './index.module.css'; @@ -44,8 +43,7 @@ const NavBar: FC = ({