diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 60a2cb7..a174ad6 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -1,11 +1,311 @@ 'use client'; -import type { NextPage } from 'next'; +import { FC, useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { useEffect } from 'react'; -import NotFoundSvgComp from '@/components/404'; +const NotFound: FC = () => { + const router = useRouter(); + const countdownSecond: number = 5; + const [second, setSecond] = useState(countdownSecond); -const NotFound: NextPage = () => { - return ; + useEffect(() => { + const intervalId = setInterval(() => { + if (second > 0) { + setSecond(second - 1); + } else { + clearInterval(intervalId); + router.push('/'); + } + }, 1000); + + return () => clearInterval(intervalId); + }, [second]); + + return ( +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ The stuff you were looking for doesn't exist +

+ + Retry + +
+
+

Redirecting in {second} seconds...

+
+
+
+
+
+
+ ); }; export default NotFound; diff --git a/src/components/404/index.tsx b/src/components/404/index.tsx deleted file mode 100644 index 4ba0eff..0000000 --- a/src/components/404/index.tsx +++ /dev/null @@ -1,313 +0,0 @@ -import { FC, useState } from 'react'; -import { useRouter } from 'next/navigation'; -import { useEffect } from 'react'; - -const GoHomeCountdown: FC = () => { - const router = useRouter(); - const countdownSecond: number = 5; - const [second, setSecond] = useState(countdownSecond); - - useEffect(() => { - const intervalId = setInterval(() => { - if (second > 0) { - setSecond(second - 1); - } else { - clearInterval(intervalId); - router.push('/'); - } - }, 1000); - - return () => clearInterval(intervalId); - }, [second]); - - return ( -
-
-

Redirecting in {second} seconds...

-
-
- ); -}; - -export default function NotFoundSvgComp() { - return ( -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- The stuff you were looking for doesn't exist -

- - Retry - - -
-
-
-
- ); -} diff --git a/src/components/ui/avatar/index.tsx b/src/components/ui/avatar/index.tsx index 1daddb6..db83d3b 100644 --- a/src/components/ui/avatar/index.tsx +++ b/src/components/ui/avatar/index.tsx @@ -5,43 +5,49 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar'; import { cn } from '@/utils/cn'; -const Avatar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -Avatar.displayName = AvatarPrimitive.Root.displayName; +type AvatarProps = React.ComponentPropsWithoutRef; +type AvatarImageProps = React.ComponentPropsWithoutRef; +type AvatarFallbackProps = React.ComponentPropsWithoutRef; + +const Avatar = React.forwardRef, AvatarProps>( + function Avatar({ className, ...props }, ref) { + return ( + + ); + }, +); const AvatarImage = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarImage.displayName = AvatarPrimitive.Image.displayName; + AvatarImageProps +>(function AvatarImage({ className, ...props }, ref) { + return ( + + ); +}); const AvatarFallback = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + AvatarFallbackProps +>(function AvatarFallback({ className, ...props }, ref) { + return ( + + ); +}); export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx index ffeb20a..357710e 100644 --- a/src/components/ui/badge/index.tsx +++ b/src/components/ui/badge/index.tsx @@ -26,8 +26,8 @@ export interface BadgeProps extends React.HTMLAttributes, VariantProps {} -function Badge({ className, variant, ...props }: BadgeProps) { +const Badge: React.FC = ({ className, variant, ...props }) => { return
; -} +}; export { Badge, badgeVariants }; diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 5edce7d..f008c43 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -36,15 +36,15 @@ export interface ButtonProps asChild?: boolean; } -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button'; +const Button = React.forwardRef(function Button( + { className, variant, size, asChild = false, ...props }, + ref, +) { + const Component = asChild ? Slot : 'button'; - return ( - - ); - }, -); -Button.displayName = 'Button'; + return ( + + ); +}); export { Button, buttonVariants }; diff --git a/src/components/ui/dialog/index.tsx b/src/components/ui/dialog/index.tsx index a479cb6..12fc6f9 100644 --- a/src/components/ui/dialog/index.tsx +++ b/src/components/ui/dialog/index.tsx @@ -7,88 +7,100 @@ import { Cross2Icon } from '@radix-ui/react-icons'; import { cn } from '@/utils/cn'; const Dialog = DialogPrimitive.Root; - const DialogTrigger = DialogPrimitive.Trigger; - const DialogPortal = DialogPrimitive.Portal; - const DialogClose = DialogPrimitive.Close; const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; - -const DialogContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - (function DialogOverlay({ className, ...props }, ref) { + return ( + - {children} - - - Close - - - -)); -DialogContent.displayName = DialogPrimitive.Content.displayName; + /> + ); +}); -const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => ( -
-); -DialogHeader.displayName = 'DialogHeader'; +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(function DialogContent({ className, children, ...props }, ref) { + return ( + + + + {children} + + + Close + + + + ); +}); -const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( -
-); -DialogFooter.displayName = 'DialogFooter'; +const DialogHeader = function DialogHeader({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ); +}; + +const DialogFooter = function DialogFooter({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ); +}; const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogTitle.displayName = DialogPrimitive.Title.displayName; +>(function DialogTitle({ className, ...props }, ref) { + return ( + + ); +}); const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogDescription.displayName = DialogPrimitive.Description.displayName; +>(function DialogDescription({ className, ...props }, ref) { + return ( + + ); +}); export { Dialog, diff --git a/src/components/ui/dropdown-menu/index.tsx b/src/components/ui/dropdown-menu/index.tsx index 5fc9bf2..4d0c7a6 100644 --- a/src/components/ui/dropdown-menu/index.tsx +++ b/src/components/ui/dropdown-menu/index.tsx @@ -7,168 +7,166 @@ import { Check, ChevronRight, Circle } from 'lucide-react'; import { cn } from '@/utils/cn'; const DropdownMenu = DropdownMenuPrimitive.Root; - const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; - const DropdownMenuGroup = DropdownMenuPrimitive.Group; - const DropdownMenuPortal = DropdownMenuPrimitive.Portal; - const DropdownMenuSub = DropdownMenuPrimitive.Sub; - const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, children, ...props }, ref) => ( - - {children} - - -)); -DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; + React.ComponentPropsWithoutRef & { inset?: boolean } +>(function DropdownMenuSubTrigger({ className, inset, children, ...props }, ref) { + return ( + + {children} + + + ); +}); const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName; +>(function DropdownMenuSubContent({ className, ...props }, ref) { + return ( + + ); +}); const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - - (function DropdownMenuContent({ className, sideOffset = 4, ...props }, ref) { + return ( + + + + ); +}); + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { inset?: boolean } +>(function DropdownMenuItem({ className, inset, ...props }, ref) { + return ( + - -)); -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; - -const DropdownMenuItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, ...props }, ref) => ( - -)); -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; + ); +}); const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, checked, ...props }, ref) => ( - - - - - - - {children} - -)); -DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; +>(function DropdownMenuCheckboxItem({ className, children, checked, ...props }, ref) { + return ( + + + + + + + {children} + + ); +}); const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - - - - - {children} - -)); -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; +>(function DropdownMenuRadioItem({ className, children, ...props }, ref) { + return ( + + + + + + + {children} + + ); +}); const DropdownMenuLabel = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, ...props }, ref) => ( - -)); -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; + React.ComponentPropsWithoutRef & { inset?: boolean } +>(function DropdownMenuLabel({ className, inset, ...props }, ref) { + return ( + + ); +}); const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; +>(function DropdownMenuSeparator({ className, ...props }, ref) { + return ( + + ); +}); -const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { +const DropdownMenuShortcut = function DropdownMenuShortcut({ + className, + ...props +}: React.HTMLAttributes) { return ( ); }; -DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; - export { DropdownMenu, DropdownMenuTrigger,