diff options
Diffstat (limited to 'src/core/components')
11 files changed, 55 insertions, 55 deletions
diff --git a/src/core/components/elements/Alert/Alert.jsx b/src/core/components/elements/Alert/Alert.jsx index 695be8a3..cf84b591 100644 --- a/src/core/components/elements/Alert/Alert.jsx +++ b/src/core/components/elements/Alert/Alert.jsx @@ -1,3 +1,13 @@ +/** + * The Alert component is used to display different types of alerts or notifications + * with different styles based on the provided type prop. + * + * @param {Object} props - Props received by the component. + * @param {ReactNode} props.children - The content to be displayed inside the alert. + * @param {string} props.className - Additional CSS class names for the alert. + * @param {string} props.type - The type of the alert ('info', 'success', or 'warning'). + * @returns {JSX.Element} - Rendered Alert component. + */ const Alert = ({ children, className, type }) => { let typeClass = '' switch (type) { diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 098d0a33..f1456a7c 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -2,38 +2,33 @@ import { useRouter } from 'next/router' import Link from '../Link/Link' import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline' +/** + * The AppBar component is a navigation component used to display a header or toolbar + * in a web application. + * + * @param {Object} props - Props received by the component. + * @param {string} props.title - The title to be displayed on the AppBar. + * @returns {JSX.Element} - Rendered AppBar component. + */ const AppBar = ({ title }) => { const router = useRouter() return ( <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'> <div className='flex items-center'> - <button - type='button' - className='p-4' - onClick={() => router.back()} - > + <button type='button' className='p-4' onClick={() => router.back()}> <ChevronLeftIcon className='w-6 stroke-2' /> </button> <div className='font-medium text-h-sm line-clamp-1'>{title}</div> </div> <div className='flex items-center px-2'> - <Link - href='/shop/cart' - className='py-4 px-2' - > + <Link href='/shop/cart' className='py-4 px-2'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> </Link> - <Link - href='/' - className='py-4 px-2' - > + <Link href='/' className='py-4 px-2'> <HomeIcon className='w-6 text-gray_r-12' /> </Link> - <Link - href='/my/menu' - className='py-4 px-2' - > + <Link href='/my/menu' className='py-4 px-2'> <Bars3Icon className='w-6 text-gray_r-12' /> </Link> </div> diff --git a/src/core/components/elements/Divider/Divider.jsx b/src/core/components/elements/Divider/Divider.jsx index ce54a2ea..f3650b00 100644 --- a/src/core/components/elements/Divider/Divider.jsx +++ b/src/core/components/elements/Divider/Divider.jsx @@ -1,3 +1,11 @@ +/** + * The Divider component is used to create a horizontal line or divider with a specific + * background color based on the provided className prop. + * + * @param {Object} props - Props that are passed to the Divider component. + * @param {string} props.className - Additional CSS classes to apply to the divider. + * @returns {JSX.Element} - Rendered Divider component. + */ const Divider = (props) => <div className={`h-1 bg-gray_r-4 ${props.className}`} /> Divider.defaultProps = { diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index ac82aaaf..ba6bf50d 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -1,6 +1,14 @@ import { LazyLoadImage } from 'react-lazy-load-image-component' import 'react-lazy-load-image-component/src/effects/opacity.css' +/** + * The `Image` component is used to display lazy-loaded images. + * + * @param {Object} props - Props passed to the `Image` component. + * @param {string} props.src - URL of the image to be displayed. + * @param {string} props.alt - Alternative text to be displayed if the image is not found. + * @returns {JSX.Element} - Rendered `Image` component. + */ const Image = ({ ...props }) => ( <> <LazyLoadImage diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx index b2dbd02f..f6b39d45 100644 --- a/src/core/components/elements/Link/Link.jsx +++ b/src/core/components/elements/Link/Link.jsx @@ -1,5 +1,13 @@ import NextLink from 'next/link' +/** + * The `Link` component is used to render Next.js links with customizable properties such as `children`, `scroll`, and `className`. + * + * @param {Object} props - Props passed to the `Link` component. + * @param {ReactNode} props.children - Child elements to be rendered as link content. + * @param {string} props.className - Additional CSS class to be applied to the link. + * @returns {JSX.Element} - Rendered `Link` component. + */ const Link = ({ children, ...props }) => { return ( <NextLink diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx index 3998875b..24ff3a51 100644 --- a/src/core/components/elements/Navbar/NavbarMobile.jsx +++ b/src/core/components/elements/Navbar/NavbarMobile.jsx @@ -16,12 +16,7 @@ const NavbarMobile = () => { <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> <div className='flex justify-between items-center mb-2'> <Link href='/'> - <Image - src={IndoteknikLogo} - alt='Indoteknik Logo' - width={120} - height={40} - /> + <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={120} height={40} /> </Link> <div className='flex gap-x-3'> <Link href='/my/wishlist'> @@ -30,10 +25,7 @@ const NavbarMobile = () => { <Link href='/shop/cart'> <ShoppingCartIcon className='w-6 text-gray_r-12' /> </Link> - <button - type='button' - onClick={open} - > + <button type='button' onClick={open}> <Bars3Icon className='w-6 text-gray_r-12' /> </button> </div> diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index d0627b24..3046782b 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -45,10 +45,7 @@ const Search = () => { return ( <> - <form - onSubmit={handleSubmit} - className='flex-1 flex relative' - > + <form onSubmit={handleSubmit} className='flex-1 flex relative'> <input type='text' ref={queryRef} @@ -59,10 +56,7 @@ const Search = () => { onBlur={onInputBlur} onFocus={loadSuggestion} /> - <button - type='submit' - className='rounded-r border border-l-0 border-gray_r-6 px-2' - > + <button type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'> <MagnifyingGlassIcon className='w-6' /> </button> diff --git a/src/core/components/elements/Pagination/Pagination.js b/src/core/components/elements/Pagination/Pagination.js index 18964fc4..c009171f 100644 --- a/src/core/components/elements/Pagination/Pagination.js +++ b/src/core/components/elements/Pagination/Pagination.js @@ -26,10 +26,7 @@ const Pagination = ({ pageCount, currentPage, url, className }) => { </Link> ) let DotsComponent = ( - <div - key={i} - className='pagination-dots' - > + <div key={i} className='pagination-dots'> ... </div> ) diff --git a/src/core/components/elements/Skeleton/BrandSkeleton.jsx b/src/core/components/elements/Skeleton/BrandSkeleton.jsx index 9a34fb9b..9a7a51f9 100644 --- a/src/core/components/elements/Skeleton/BrandSkeleton.jsx +++ b/src/core/components/elements/Skeleton/BrandSkeleton.jsx @@ -1,8 +1,5 @@ const BrandSkeleton = () => ( - <div - role='status' - className='animate-pulse' - > + <div role='status' className='animate-pulse'> <div className='h-12 bg-gray-200 rounded'></div> <span className='sr-only'>Loading...</span> </div> diff --git a/src/core/components/elements/Skeleton/ImageSkeleton.jsx b/src/core/components/elements/Skeleton/ImageSkeleton.jsx index 39d06331..2ca6b2a3 100644 --- a/src/core/components/elements/Skeleton/ImageSkeleton.jsx +++ b/src/core/components/elements/Skeleton/ImageSkeleton.jsx @@ -1,12 +1,6 @@ const ImageSkeleton = () => ( - <div - role='status' - className='animate-pulse' - > - <div - className='flex items-center justify-center h-56 mb-4 bg-gray-300 rounded' - aria-busy - > + <div role='status' className='animate-pulse'> + <div className='flex items-center justify-center h-56 mb-4 bg-gray-300 rounded' aria-busy> <svg className='w-12 h-12 text-gray-200' xmlns='http://www.w3.org/2000/svg' diff --git a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx index ddc0d3bc..84d1c0d1 100644 --- a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx +++ b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx @@ -3,10 +3,7 @@ const ProductCardSkeleton = () => ( role='status' className='p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6' > - <div - className='flex items-center justify-center h-36 mb-4 bg-gray-300 rounded' - aria-busy - > + <div className='flex items-center justify-center h-36 mb-4 bg-gray-300 rounded' aria-busy> <svg className='w-12 h-12 text-gray-200' xmlns='http://www.w3.org/2000/svg' |