-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #210 from epigram5-9/merge/FE-29
FE-29 🔀 브랜치 최신화
- Loading branch information
Showing
15 changed files
with
512 additions
and
118 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,30 @@ | ||
| import React from 'react'; | ||
| import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog_dim'; | ||
| import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; | ||
|
|
||
| interface UserProfileModalProps { | ||
| username: string; | ||
| profileImage: string; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| function UserProfileModal({ username, profileImage, children }: UserProfileModalProps) { | ||
| return ( | ||
| <Dialog> | ||
| <DialogTrigger asChild>{children}</DialogTrigger> | ||
| <DialogContent className='sm:max-w-[425px] bg-white'> | ||
| <div className='flex items-center space-x-4 p-6'> | ||
| <Avatar className='h-12 w-12'> | ||
| <AvatarImage src={profileImage} alt={username} /> | ||
| <AvatarFallback>{username[0]}</AvatarFallback> | ||
| </Avatar> | ||
| <div> | ||
| <h4 className='text-lg font-medium'>{username}</h4> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| export default UserProfileModal; |
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,65 @@ | ||
| import * as React from 'react'; | ||
| import * as DialogPrimitive from '@radix-ui/react-dialog'; | ||
| import { X } from 'lucide-react'; | ||
|
|
||
| import cn from '@/lib/utils'; | ||
|
|
||
| const Dialog = DialogPrimitive.Root; | ||
|
|
||
| const DialogTrigger = DialogPrimitive.Trigger; | ||
|
|
||
| const DialogPortal = DialogPrimitive.Portal; | ||
|
|
||
| const DialogClose = DialogPrimitive.Close; | ||
|
|
||
| const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Overlay | ||
| ref={ref} | ||
| className={cn('fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; | ||
|
|
||
| const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(({ className, children, ...props }, ref) => ( | ||
| <DialogPortal> | ||
| <DialogOverlay /> | ||
| <DialogPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', | ||
| className, | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'> | ||
| <X className='h-4 w-4' /> | ||
| <span className='sr-only'>Close</span> | ||
| </DialogPrimitive.Close> | ||
| </DialogPrimitive.Content> | ||
| </DialogPortal> | ||
| )); | ||
| DialogContent.displayName = DialogPrimitive.Content.displayName; | ||
|
|
||
| function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { | ||
| return <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />; | ||
| } | ||
| DialogHeader.displayName = 'DialogHeader'; | ||
|
|
||
| function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { | ||
| return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />; | ||
| } | ||
| DialogFooter.displayName = 'DialogFooter'; | ||
|
|
||
| const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} /> | ||
| )); | ||
| DialogTitle.displayName = DialogPrimitive.Title.displayName; | ||
|
|
||
| const DialogDescription = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} /> | ||
| )); | ||
| DialogDescription.displayName = DialogPrimitive.Description.displayName; | ||
|
|
||
| export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription }; |
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
Oops, something went wrong.