mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-23 05:33:07 +01:00
add nav item component
This commit is contained in:
parent
22fd78901b
commit
3a1bd74895
3 changed files with 32 additions and 0 deletions
20
src/app/components/nav-item/NavItem.tsx
Normal file
20
src/app/components/nav-item/NavItem.tsx
Normal file
|
@ -0,0 +1,20 @@
|
|||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { as } from 'folds';
|
||||
import * as css from './styles.css';
|
||||
|
||||
export const NavItem = as<
|
||||
'div',
|
||||
{
|
||||
highlight?: boolean;
|
||||
} & css.RoomSelectorVariants
|
||||
>(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
|
||||
<AsNavItem
|
||||
className={classNames(css.NavItem({ variant, radii }), className)}
|
||||
data-highlight={highlight}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</AsNavItem>
|
||||
));
|
10
src/app/components/nav-item/NavItemContent.tsx
Normal file
10
src/app/components/nav-item/NavItemContent.tsx
Normal file
|
@ -0,0 +1,10 @@
|
|||
import React, { ComponentProps } from 'react';
|
||||
import { Text, as } from 'folds';
|
||||
import classNames from 'classnames';
|
||||
import * as css from './styles.css';
|
||||
|
||||
export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
|
||||
)
|
||||
);
|
2
src/app/components/nav-item/index.ts
Normal file
2
src/app/components/nav-item/index.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export * from './NavItem';
|
||||
export * from './NavItemContent';
|
Loading…
Reference in a new issue