-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6b816ec
commit 7defb07
Showing
15 changed files
with
350 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| 'use client'; | ||
|
|
||
| import { useEffect, useState, type ComponentProps } from 'react'; | ||
| import Image, { type ImageProps } from 'next/image'; | ||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from '@chatse/toolkit'; | ||
| import { Icon } from './icon'; | ||
|
|
||
| export const avatarVariants = cva( | ||
| 'relative inline-flex min-w-0 shrink-0 items-center justify-center overflow-hidden border-transparent text-center font-semibold uppercase', | ||
| { | ||
| variants: { | ||
| scheme: { | ||
| sky: 'bg-sky-100 text-sky-600', | ||
| pink: 'bg-pink-100 text-pink-600', | ||
| green: 'bg-emerald-100 text-emerald-600', | ||
| purple: 'bg-violet-100 text-violet-600', | ||
| rose: 'bg-rose-100 text-rose-600', | ||
| gray: 'bg-gray-100 text-gray-600', | ||
| orange: 'bg-orange-100 text-orange-600', | ||
| }, | ||
| size: { | ||
| xs: 'h-4 w-4 text-[0.4rem]', | ||
| sm: 'h-6 w-6 text-[0.6rem]', | ||
| md: 'h-8 w-8 text-[0.8rem]', | ||
| lg: 'h-12 w-12 text-[1.2rem]', | ||
| xl: 'h-16 w-16 text-[1.6rem]', | ||
| xxl: 'h-24 w-24 text-[2.4rem]', | ||
| }, | ||
| radius: { | ||
| none: 'rounded-none', | ||
| md: 'rounded-md', | ||
| full: 'rounded-full', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| scheme: 'sky', | ||
| size: 'sm', | ||
| radius: 'md', | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| interface BaseAvatarProps { | ||
| name?: string; | ||
| } | ||
|
|
||
| const AvatarPlaceholderIcon = () => { | ||
| return <Icon name="User" />; | ||
| }; | ||
|
|
||
| const getInitials = (name: string) => { | ||
| const initials = name.split(' ').map(n => n[0]); | ||
| return initials.join(''); | ||
| }; | ||
|
|
||
| interface AvatarNameProps extends ComponentProps<'div'>, BaseAvatarProps {} | ||
|
|
||
| const AvatarName = ({ name, ...props }: AvatarNameProps) => | ||
| name ? ( | ||
| <div role="img" aria-label={name} {...props}> | ||
| {getInitials(name)} | ||
| </div> | ||
| ) : null; | ||
|
|
||
| export interface AvatarProps | ||
| extends BaseAvatarProps, | ||
| VariantProps<typeof avatarVariants>, | ||
| ComponentProps<'span'> { | ||
| imageProps?: ImageProps; | ||
| } | ||
|
|
||
| export const Avatar = ({ | ||
| name, | ||
| className, | ||
| radius, | ||
| scheme, | ||
| size, | ||
| imageProps, | ||
| ...props | ||
| }: AvatarProps) => { | ||
| const [error, setError] = useState(!imageProps?.src); | ||
|
|
||
| useEffect(() => { | ||
| imageProps?.src ? setError(false) : setError(true); | ||
| }, [imageProps?.src]); | ||
|
|
||
| const ErrorFallbackComponent = name ? <AvatarName name={name} /> : <AvatarPlaceholderIcon />; | ||
|
|
||
| const ImageComponent = imageProps ? ( | ||
| <Image | ||
| fill | ||
| sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" | ||
| {...imageProps} | ||
| src={imageProps.src} | ||
| alt={imageProps.alt} | ||
| onError={e => { | ||
| imageProps.onError?.(e); | ||
| setError(true); | ||
| }} | ||
| className={cn('object-cover', imageProps.className)} | ||
| /> | ||
| ) : null; | ||
|
|
||
| return ( | ||
| <span className={cn(avatarVariants({ scheme, size, radius, className }))} {...props}> | ||
| {error ? ErrorFallbackComponent : ImageComponent} | ||
| </span> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,11 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| #nprogress { | ||
| @apply pointer-events-none z-50 !important; | ||
| } | ||
|
|
||
| #nprogress .bar { | ||
| @apply fixed left-0 top-0 z-50 h-0.5 w-full bg-blue-700 !important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
libs/toolkit/src/components/icon-button/icon-button.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { User2 } from 'lucide-react'; | ||
|
|
||
| import { AccessibleIcon } from '../accessible-icon/accessible-icon'; | ||
| import { IconButton } from './icon-button'; | ||
|
|
||
| const meta = { | ||
| component: IconButton, | ||
| title: 'IconButton', | ||
| } satisfies Meta<typeof IconButton>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof IconButton>; | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| children: ( | ||
| <AccessibleIcon> | ||
| <User2 /> | ||
| </AccessibleIcon> | ||
| ), | ||
| 'aria-label': 'User', | ||
| variant: 'ghost', | ||
| }, | ||
| render: props => ( | ||
| <div className="flex items-center gap-2"> | ||
| <IconButton size="sm" {...props} /> | ||
| <IconButton size="md" {...props} /> | ||
| <IconButton size="lg" {...props} /> | ||
| </div> | ||
| ), | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| 'use client'; | ||
|
|
||
| import { cva, type VariantProps } from 'class-variance-authority'; | ||
|
|
||
| import { cn } from '../../utils/cn'; | ||
| import { Button, type ButtonProps } from '../button/button'; | ||
|
|
||
| export const iconButtonVariants = cva('p-1', { | ||
| variants: { | ||
| size: { | ||
| sm: 'h-6 w-6', | ||
| md: 'h-8 w-8', | ||
| lg: 'h-10 w-10', | ||
| }, | ||
| radius: { | ||
| none: 'rounded-none', | ||
| md: 'rounded-md', | ||
| full: 'rounded-full', | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| size: 'md', | ||
| radius: 'md', | ||
| }, | ||
| }); | ||
|
|
||
| export interface IconButtonProps | ||
| extends Omit<ButtonProps, 'size'>, | ||
| VariantProps<typeof iconButtonVariants> { | ||
| 'aria-label': string; | ||
| } | ||
|
|
||
| export const IconButton = ({ size, className, ...props }: IconButtonProps) => ( | ||
| <Button size={size} className={cn(iconButtonVariants({ size, className }))} {...props} /> | ||
| ); |
Oops, something went wrong.