Merge pull request #28 from firehawk89/adjust-components-props

Adjust Components Props

src/app/layout.tsx

@@ -1,5 +1,4 @@
 // TODO: Adjust site metadata
-// TODO: Adjust components props types
 // TODO: Add 404 page
 
 import type { Metadata } from 'next'

src/components/header/header-navbar.tsx

@@ -6,13 +6,11 @@ import Socials from '@/components/ui/socials/socials'
 import useMediaQuery from '@/hooks/use-media-query'
 import HeaderContext from '@/store/header-context'
 import { MOBILE_BREAKPOINT, cn } from '@/utils'
-import { FC, useContext } from 'react'
+import { FC, HTMLAttributes, useContext } from 'react'
 
-type HeaderNavbarProps = {
-  className?: string
-}
+interface HeaderNavbarProps extends HTMLAttributes<HTMLDivElement> {}
 
-const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
+const HeaderNavbar: FC<HeaderNavbarProps> = ({ className, ...props }) => {
   const { isMenuOpened } = useContext(HeaderContext)
   const isMobile = useMediaQuery(MOBILE_BREAKPOINT)
 
@@ -23,6 +21,7 @@ const HeaderNavbar: FC<HeaderNavbarProps> = ({ className }) => {
         isMenuOpened && 'translate-y-0',
         className
       )}
+      {...props}
     >
       <Menu
         className="mx-auto uppercase"

src/components/header/header.tsx

@@ -1,21 +1,20 @@
 import HeaderNavbar from '@/components/header/header-navbar'
 import ThemeToggler from '@/components/ui/theme-toggler'
 import { cn } from '@/utils'
-import { FC } from 'react'
+import { FC, HTMLAttributes } from 'react'
 
 import MenuIcon from './menu/menu-icon/menu-icon'
 
-type HeaderProps = {
-  className?: string
-}
+interface HeaderProps extends HTMLAttributes<HTMLDivElement> {}
 
-const Header: FC<HeaderProps> = ({ className }) => {
+const Header: FC<HeaderProps> = ({ className, ...props }) => {
   return (
     <header
       className={cn(
         'fixed left-0 top-0 z-10 w-full bg-light bg-opacity-10 px-8 py-5 shadow-blur backdrop-blur-[8px] lg:px-10',
         className
       )}
+      {...props}
     >
       <HeaderNavbar />
       <div className="relative z-30 flex items-center justify-between md:static">

src/components/header/menu/menu-icon/menu-icon-bar.tsx

@@ -1,15 +1,16 @@
 import { cn } from '@/utils'
-import { FC } from 'react'
+import { FC, HTMLAttributes } from 'react'
 
-type MenuIconBarProps = { className?: string }
+interface MenuIconBarProps extends HTMLAttributes<HTMLSpanElement> {}
 
-const MenuIconBar: FC<MenuIconBarProps> = ({ className }) => {
+const MenuIconBar: FC<MenuIconBarProps> = ({ className, ...props }) => {
   return (
     <span
       className={cn(
         'absolute left-0 right-0 block h-0.5 w-full rounded-sm bg-dark transition-all dark:bg-light',
         className
       )}
+      {...props}
     />
   )
 }

src/components/header/menu/menu-icon/menu-icon.tsx

@@ -2,21 +2,20 @@
 
 import HeaderContext from '@/store/header-context'
 import { cn } from '@/utils'
-import { FC, useContext } from 'react'
+import { FC, HTMLAttributes, useContext } from 'react'
 
 import MenuIconBar from './menu-icon-bar'
 
-type MenuIconProps = {
-  className?: string
-}
+interface MenuIconProps extends HTMLAttributes<HTMLDivElement> {}
 
-const MenuIcon: FC<MenuIconProps> = ({ className }) => {
+const MenuIcon: FC<MenuIconProps> = ({ className, ...props }) => {
   const { isMenuOpened, toggleMenu } = useContext(HeaderContext)
 
   return (
     <div
       className={cn('relative h-5 w-7 cursor-pointer md:static', className)}
       onClick={toggleMenu}
+      {...props}
     >
       <MenuIconBar
         className={cn(

src/components/header/menu/menu-item.tsx

@@ -2,19 +2,22 @@
 
 import HeaderContext from '@/store/header-context'
 import Link from 'next/link'
-import { FC, ReactNode, useContext } from 'react'
+import { FC, LiHTMLAttributes, useContext } from 'react'
 
-type MenuItemProps = {
-  children: ReactNode
-  className?: string
+interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
   href: string
 }
 
-const MenuItem: FC<MenuItemProps> = ({ children, className, href }) => {
+const MenuItem: FC<MenuItemProps> = ({
+  children,
+  className,
+  href,
+  ...props
+}) => {
   const { toggleMenu } = useContext(HeaderContext)
 
   return (
-    <li className={className} onClick={toggleMenu}>
+    <li className={className} onClick={toggleMenu} {...props}>
       <Link
         className="text-lg font-medium transition-colors md:hover:text-accent"
         href={href}

src/components/header/menu/menu.tsx

@@ -1,20 +1,24 @@
 import { cn } from '@/utils'
-import { FC, ReactNode } from 'react'
+import { FC, HTMLAttributes } from 'react'
 
-type MenuProps = {
-  children: ReactNode
-  className?: string
+interface MenuProps extends HTMLAttributes<HTMLUListElement> {
   orientation?: 'horizontal' | 'vertical'
 }
 
-const Menu: FC<MenuProps> = ({ children, className, orientation }) => {
+const Menu: FC<MenuProps> = ({
+  children,
+  className,
+  orientation,
+  ...props
+}) => {
   return (
     <ul
       className={cn(
         'flex w-fit items-center justify-stretch bg-transparent',
         orientation === 'vertical' ? 'flex-col gap-6' : 'flex-row gap-10',
         className
       )}
+      {...props}
     >
       {children}
     </ul>

src/components/sections/projects/project-card.tsx

@@ -18,9 +18,10 @@ const ProjectCard: FC<ProjectCardProps> = ({
   className,
   data: { body, image, slug, technologies, title },
   imageSizes,
+  ...props
 }) => {
   return (
-    <article className={cn('group', className)}>
+    <article className={cn('group', className)} {...props}>
       <Card>
         <Link className="relative block aspect-video" href={`/${slug}`}>
           {image ? (

src/components/ui/button.tsx

@@ -25,7 +25,7 @@ export const buttonVariants = cva(
   }
 )
 
-interface ButtonProps
+export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {}
 

src/components/ui/content.tsx

@@ -1,11 +1,14 @@
 import { cn } from '@/utils'
-import { FC, ReactNode } from 'react'
+import { FC, HTMLAttributes } from 'react'
 
-type ContentProps = { children: ReactNode; className?: string }
+interface ContentProps extends HTMLAttributes<HTMLDivElement> {}
 
-const Content: FC<ContentProps> = ({ children, className }) => {
+const Content: FC<ContentProps> = ({ children, className, ...props }) => {
   return (
-    <div className={cn('mx-auto h-full w-full max-w-7xl px-5', className)}>
+    <div
+      className={cn('mx-auto h-full w-full max-w-7xl px-5', className)}
+      {...props}
+    >
       {children}
     </div>
   )

src/components/ui/heading.tsx

@@ -37,12 +37,14 @@ const Heading: FC<HeadingProps> = ({
   position,
   size,
   variant,
+  ...props
 }) => {
   const HeadingTag = size ? size : 'h1'
 
   return (
     <HeadingTag
       className={cn(headingVariants({ position, size, variant }), className)}
+      {...props}
     >
       {children}
     </HeadingTag>

src/components/ui/socials/socials-item.tsx

@@ -1,10 +1,9 @@
 import Link from 'next/link'
-import { ComponentType, FC } from 'react'
+import { ComponentType, FC, LiHTMLAttributes } from 'react'
 import { IconBaseProps } from 'react-icons'
 
-type SocialsItemProps = {
+interface SocialsItemProps extends LiHTMLAttributes<HTMLLIElement> {
   Icon: ComponentType<IconBaseProps>
-  className?: string
   href: string
   title: string
 }
@@ -14,9 +13,10 @@ const SocialsItem: FC<SocialsItemProps> = ({
   className,
   href,
   title,
+  ...props
 }) => {
   return (
-    <li className={className}>
+    <li className={className} {...props}>
       <Link
         className="transition-colors hover:text-accent"
         href={href}

src/components/ui/socials/socials.tsx

@@ -1,21 +1,21 @@
 import SocialsItem from '@/components/ui/socials/socials-item'
 import { cn } from '@/utils'
-import { FC } from 'react'
+import { FC, HTMLAttributes } from 'react'
 import { FaGithub, FaLinkedin } from 'react-icons/fa'
 
-type SocialsProps = {
-  className?: string
+interface SocialsProps extends HTMLAttributes<HTMLUListElement> {
   orientation?: 'horizontal' | 'vertical'
 }
 
-const Socials: FC<SocialsProps> = ({ className, orientation }) => {
+const Socials: FC<SocialsProps> = ({ className, orientation, ...props }) => {
   return (
     <ul
       className={cn(
         'flex gap-5',
         orientation === 'vertical' ? 'flex-col' : 'flex-row',
         className
       )}
+      {...props}
     >
       <SocialsItem
         Icon={FaLinkedin}

src/components/ui/theme-toggler.tsx

@@ -1,14 +1,14 @@
 'use client'
 
-import Button from '@/components/ui/button'
+import Button, { ButtonProps } from '@/components/ui/button'
 import Theme from '@/types/enums/Theme'
 import { useTheme } from 'next-themes'
 import { FC, useEffect, useState } from 'react'
 import { CiDark, CiLight } from 'react-icons/ci'
 
-type ThemeTogglerProps = { className?: string }
+interface ThemeTogglerProps extends ButtonProps {}
 
-const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
+const ThemeToggler: FC<ThemeTogglerProps> = ({ className, ...props }) => {
   const [mounted, setMounted] = useState<boolean>(false)
   const { resolvedTheme, setTheme } = useTheme()
   const isDarkTheme = (resolvedTheme as Theme) === 'dark'
@@ -20,11 +20,16 @@ const ThemeToggler: FC<ThemeTogglerProps> = ({ className }) => {
   return (
     <>
       {!mounted ? (
-        <Button className={className} variant="icon">
+        <Button className={className} variant="icon" {...props}>
           <div className="h-7 w-7 animate-pulse rounded-full bg-neutral-200 dark:bg-neutral-700" />
         </Button>
       ) : (
-        <Button className={className} onClick={toggleTheme} variant="icon">
+        <Button
+          className={className}
+          onClick={toggleTheme}
+          variant="icon"
+          {...props}
+        >
           {isDarkTheme ? (
             <CiDark className="h-7 w-7" />
           ) : (