@spacemade/ui 0.0.1

package/src/components/common/blocks/Carousel.tsx

@@ -0,0 +1,59 @@
+import { Autoplay, Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/css'
+import 'swiper/css/pagination'
+
+interface Props<P> {
+	slides: P[]
+	renderComponent: (slide: P) => JSX.Element
+	slidesPerView?: number
+	onSlideClick?: (slide: P) => void
+	autoplay?: boolean
+}
+
+export const Carousel = <P extends object | string>({
+	slides,
+	renderComponent,
+	slidesPerView = 1,
+	onSlideClick,
+	autoplay = true,
+}: Props<P>) => {
+	if (!slides.length) {
+		return <></>
+	}
+
+	return (
+		<>
+			<Swiper
+				breakpoints={{
+					// when window width is >= 991px
+					991: {
+						slidesPerView: slidesPerView,
+					},
+				}}
+				pagination={{
+					clickable: true,
+				}}
+				autoplay={
+					autoplay
+						? {
+								delay: 6000,
+								pauseOnMouseEnter: true,
+						  }
+						: false
+				}
+				modules={[Pagination, Autoplay]}
+				className='mb-3 pb-5'
+			>
+				{slides.map((slide, key) => (
+					<SwiperSlide
+						key={key}
+						onClick={() => onSlideClick && onSlideClick(slide)}
+					>
+						{renderComponent(slide)}
+					</SwiperSlide>
+				))}
+			</Swiper>
+		</>
+	)
+}

package/src/components/common/blocks/CodeSnippet.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react'
+import Button from '../button/Button'
+import { copyToClipboard } from '@helpers/sharer'
+import Prism from 'prismjs';
+
+const CodeSnippet = ({
+	code,
+	lang,
+	copyButtonAlign = 'center'
+} : {
+	code: string
+	lang: 'bash' | 'html' | 'javascript'
+	copyButtonAlign?: 'start' | 'center' | 'end'
+}) => {
+	useEffect(() => {
+		if (code) Prism.highlightAll();
+	}, [code]);
+
+	return (
+		<div className='d-inline-block v-align-middle fs-5 w-lg-100-down mw-xs-100'>
+			<div className={`code-snippet d-flex align-items-${copyButtonAlign} pe-1`}>
+				<div className='code-snippet-highlight'>
+					<pre className='chroma'>
+						<code className={`language-${lang}`} data-lang='sh'>
+							<span className='line'>
+								<span className='cl'>{ code }</span>
+							</span>
+						</code>
+					</pre>
+				</div>
+				<Button onClick={(e) => {
+						e.preventDefault()
+						copyToClipboard(code, 'Copied!')
+					}}
+					type='button'
+					className='no-min-size d-flex align-items-center justify-content-center w-xs-50p h-xs-50p'
+					aria-label='Copy'
+				>
+					<i className='bi bi-clipboard fs-4'></i>
+				</Button>
+			</div>
+		</div>
+	)
+}
+
+export default CodeSnippet

package/src/components/common/blocks/InfinityScrollWrapper.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback, useRef } from 'react'
+
+interface WithInfinityScrollProps<P> {
+	Component: React.ComponentType<P>
+	isFetching: boolean
+	onLastItemIntersect: () => void
+	hasNextPage: boolean
+	props: P
+}
+
+const InfinityScrollWrapper = <P extends object>({
+	Component,
+	isFetching,
+	onLastItemIntersect,
+	hasNextPage,
+	props,
+}: WithInfinityScrollProps<P>) => {
+	const observer = useRef<IntersectionObserver | null>(null)
+	const lastItemElementRef = useCallback(
+		(node: HTMLDivElement) => {
+			if (isFetching) return
+			if (observer.current) observer.current.disconnect()
+			observer.current = new IntersectionObserver((entries) => {
+				if (entries[0].isIntersecting && hasNextPage) {
+					onLastItemIntersect()
+				}
+			})
+
+			if (node) observer.current.observe(node)
+		},
+		[isFetching, hasNextPage, onLastItemIntersect]
+	)
+
+	return (
+		<Component
+			{...(props as P)}
+			lastItemElementRef={lastItemElementRef}
+			isFetching={isFetching}
+		/>
+	)
+}
+
+export default InfinityScrollWrapper

package/src/components/common/blocks/SplitBlock.tsx

@@ -0,0 +1,47 @@
+export const SplitBlock = ({
+	direction,
+	imgSrc,
+	imgAlt,
+	imgClass,
+	header,
+	headerClass,
+	content,
+} : {
+	direction: string,
+	imgSrc: string,
+	imgAlt: string,
+	imgClass?: string,
+	header: string,
+	headerClass?: string,
+	content: JSX.Element,
+}) => {
+	return (
+		<div className="container">
+			<div className="row align-items-center pt-7">
+				{ direction === 'img-left' ? (
+					<>
+						<div className="col-md-5">
+							<img src={ imgSrc } alt={ imgAlt } className={`img-fluid ${imgClass}`} />
+						</div>
+						<div className="col-md-6">
+							<h2 className={headerClass}>{ header }</h2>
+							{ content }
+						</div>
+					</>
+				) : (
+					<>
+						<div className="col-md-6 pe-lg-9">
+							<h2 className={headerClass}>{ header }</h2>
+							{ content }
+						</div>
+						<div className="col-md-5 mx-auto">
+							<img src={ imgSrc } alt={ imgAlt } className={`img-fluid ${imgClass}`} />
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default SplitBlock

package/src/components/common/blocks/TopImageBlock.tsx

@@ -0,0 +1,39 @@
+export const TopImageBlock = ({
+	image,
+	imgSrc,
+	imgAlt,
+	imgClass,
+	header,
+	headerClass,
+	content,
+} : {
+	image?: boolean,
+	imgSrc?: string,
+	imgAlt?: string,
+	imgClass?: string,
+	header: string,
+	headerClass?: string,
+	content: JSX.Element,
+}) => {
+	return (
+		<div className="container pt-7">
+			{ image === true ? (
+				<>
+					<div className="text-center">
+						<h2 className={headerClass || ''}>{ header }</h2>
+						<img src={ imgSrc } alt={ imgAlt } className={`img-fluid mt-4 mb-5 ${imgClass || ''}`} />
+					</div>
+				</>
+			) : (
+				<>
+					<h2 className={`text-center ${headerClass || ''}`}>{ header }</h2>
+				</>
+			)}
+			<div className={`w-lg-980p mx-auto ${image === false ? 'mt-4' : ''}`}>
+				{ content }
+			</div>
+		</div>
+	)
+}
+
+export default TopImageBlock

package/src/components/common/button/Button.tsx

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from 'react'
+import Spinner from '@components/common/loading/Spinner'
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+	ariaLabel?: string
+	color?: string
+	variant?: 'solid' | 'outline' | string
+	size?: 'sm' | 'md' | 'lg' | string
+	spinnerColor?: string
+	children: ReactNode | string
+	outline?: boolean
+	isLoading?: boolean
+	buttonRef?: Ref<HTMLButtonElement>
+}
+
+const Button = ({
+	children,
+	className,
+	ariaLabel,
+	color = 'none',
+	variant = 'solid',
+	size = 'md',
+	spinnerColor = 'white',
+	type = 'button',
+	outline = false,
+	isLoading = false,
+	buttonRef,
+	...rest
+}: Props) => {
+	const isOutline = outline || variant === 'outline'
+	const sizeClass =
+		size === 'sm' ? 'btn-sm' : size === 'lg' ? 'btn-lg' : size === 'md' ? '' : `btn-${size}`
+
+	return (
+		<button
+			ref={buttonRef}
+			type={type}
+			className={`btn btn-${isOutline ? 'outline-' : ''}${color} ${sizeClass} ${className} ${
+				isLoading ? 'is_loading' : ''
+			}`}
+			aria-label={ariaLabel}
+			{...rest}
+		>
+			{isLoading ? <Spinner color={spinnerColor} /> : children}
+		</button>
+	)
+}
+
+export default Button

package/src/components/common/button/ButtonWithActions.tsx

@@ -0,0 +1,71 @@
+import Button from '@components/common/button/Button'
+import {
+	IconButton,
+	Menu,
+	MenuButton,
+	MenuItem,
+	MenuList,
+} from '@chakra-ui/react'
+
+type ButtonAction = {
+	label: string
+	icon: string
+	onClick?: () => void
+	dataAction?: string
+	buttonType?: 'submit' | 'reset' | 'button'
+	isDisabled?: boolean
+}
+
+export const ButtonWithActions = ({
+	label,
+	isLoading,
+	onClick,
+	buttonType,
+	actions,
+} : {
+	label: string
+	isLoading?: boolean,
+	onClick?: () => void
+	buttonType?: 'submit' | 'reset' | 'button',
+	actions: ButtonAction[]
+}) => {
+	return (
+		<div className='d-flex justify-content-end btn-group-actions'>
+			<Button
+				type={buttonType}
+				className='text-white w-xs-140p'
+				color='primary'
+				isLoading={isLoading}
+				disabled={isLoading}
+				onClick={onClick}
+			>
+				{label}
+			</Button>
+			<Menu placement='bottom-end'>
+				<MenuButton
+					as={IconButton}
+					aria-label='Options'
+					icon={<span className='bi bi-chevron-down'></span>}
+					className={`btn no-min-size link btn-primary text-white w-xs-45p`}
+				/>
+				<div className='z-index-120'>
+					<MenuList className='bg-white shadow rounded-md menu-list-container'>
+						{actions.map((item, key) => (
+							<MenuItem
+								key={key}
+								data-action={item.dataAction}
+								type={item.buttonType}
+								className={`border-0 bg-white px-3 py-2 ${item.isDisabled ? 'opacity-5' : 'bg-hover-background'}`}
+								icon={<span className={`bi bi-${item.icon} fs-4`}></span>}
+								isDisabled={item.isDisabled}
+								onClick={item.onClick}
+							>
+								{item.label}
+							</MenuItem>
+						))}
+					</MenuList>
+				</div>
+			</Menu>
+		</div>
+	)
+}

package/src/components/common/button/DropdownButton.tsx

@@ -0,0 +1,61 @@
+import {
+	Popover,
+	PopoverTrigger,
+	Button,
+	PopoverContent,
+	PopoverArrow,
+	PopoverBody,
+} from '@chakra-ui/react'
+import Link from 'next/link'
+import React from 'react'
+
+export const DropdownButton = ({
+	buttonLabel,
+	actions,
+	maxWidth = 380
+} : {
+	buttonLabel: string
+	maxWidth?: number
+	actions: {
+		label: string
+		href: string
+		Icon: React.ComponentType<{ width: string }>
+		description?: string
+	}[]
+}) => {
+	return (
+		<Popover isLazy trigger='hover'>
+			<PopoverTrigger>
+				<Button className='btn border-none fw-bold text-dark no-min-size'>{buttonLabel}</Button>
+			</PopoverTrigger>
+			<PopoverContent className={`shadow-xs w-xs-${maxWidth}p`}>
+				<PopoverArrow />
+				<PopoverBody className='p-0'>
+					<div className='d-flex flex-column'>
+						{actions.map(({ label, href, Icon, description }, key) => (
+							<Link
+								key={key}
+								className='btn border-none bg-hover-background fw-bold text-dark w-100 p-3 no-min-size d-flex justify-content-start align-items-center gap-4'
+								href={href}
+							>
+								<div className='text-primary'>
+									<Icon width='50px' />
+								</div>
+								<span className='d-flex flex-column text-start'>
+									<span className={`h5 mb-0 ${description ? 'fw-bold' : ''}`}>
+										{label}
+									</span>
+									{description && (
+										<span className='text-medium-gray small-md fw-normal mt-1'>
+											{description}
+										</span>
+									)}
+								</span>
+							</Link>
+						))}
+					</div>
+				</PopoverBody>
+			</PopoverContent>
+		</Popover>
+	)
+}

package/src/components/common/button/ScrollDownArrow.tsx

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+
+export const ScrollDownArrow = ({
+	path,
+	label,
+} : {
+	path: string,
+	label: string,
+}) => {
+	return (
+		<>
+			<Link
+				href={path}
+				className={`d-lg-block w-xs-110p mx-auto d-none text-center position-absolute start-0 end-0 bottom-0 mb-2`}
+				aria-label={`Link to ${label}`}
+			>
+				<span className="bi bi-chevron-down fs-1 text-white"></span>
+			</Link>
+		</>
+	)
+}
+
+export default ScrollDownArrow

package/src/components/common/button/SharerActionBox.tsx

@@ -0,0 +1,248 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerHeader,
+	DrawerOverlay,
+	Tooltip,
+	useDisclosure,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import {
+	copyToClipboard,
+	facebookSharerLink,
+	linkedinSharerLink,
+	mailSharerLink,
+	twitterSharerLink,
+} from '@helpers/sharer'
+import { XTwitterIcon } from '../Icons/XTwitterIcon'
+import { OptimizedImage } from '../Image/OptimizedImage'
+
+const SharerActionBox = ({
+	name,
+	imageUrl,
+	shareUrl,
+	isLiked,
+	iconSize = 'md',
+}: {
+	name: string
+	imageUrl?: string | null | undefined
+	shareUrl: string
+	iconSize?: 'sm' | 'md' | 'lg'
+	isLiked?: boolean
+	type?: 'product' | 'post'
+	entityId?: string
+}) => {
+	const [hasLike, setHasLike] = useState(isLiked || false)
+	const { user } = useUserAuthContext()
+	const { push: redirect } = useRouter()
+	const { isOpen, onOpen, onClose } = useDisclosure()
+	const [isMobile, setIsMobile] = useState<boolean>(false)
+
+	useEffect(() => {
+		setIsMobile(window.innerWidth < 991)
+	}, [setIsMobile])
+
+	const fullShareUrl = useMemo(() => {
+		return typeof window !== 'undefined'
+			? window.location.origin + shareUrl
+			: ''
+	}, [shareUrl])
+
+	const onShare = () => {
+		if (navigator.share && isMobile) {
+			navigator
+				.share({
+					title: name,
+					url: fullShareUrl,
+				})
+				.then(() => {
+					toast.success('Thanks for sharing!')
+				})
+				.catch(console.error)
+		} else {
+			onOpen()
+		}
+	}
+
+	return (
+		<>
+			<ul className='list-unstyled d-flex justify-content-end gap-3 mb-0'>
+				{/* <li>
+					<Button
+						className='no-min-size p-0'
+						onClick={() => copyToClipboard(fullShareUrl)}
+					>
+						<span className={`bi bi-link-45deg`}></span>
+					</Button>
+				</li> */}
+				<li>
+					<Button
+						className='no-min-size p-0'
+						onClick={onShare}
+						aria-label='Share'
+					>
+						<span className={`bi bi-share ${iconSize}`}></span>
+					</Button>
+				</li>
+			</ul>
+
+			<Drawer
+				placement={isMobile ? 'bottom' : undefined}
+				onClose={onClose}
+				isOpen={isOpen}
+				size='xl'
+			>
+				<DrawerOverlay />
+				<DrawerContent className={isMobile ? 'drawer mt-27' : 'xl'}>
+					<div className='mw-xs-600p'>
+						<div className='d-none d-lg-block'>
+							<DrawerCloseButton />
+						</div>
+						<DrawerHeader className='d-lg-none'>
+							<div className='d-flex align-items-center justify-content-between'>
+								<span className='lead'>Share</span>
+								<Button
+									className='text-white no-min-size p-0'
+									onClick={onClose}
+								>
+									<span className='bi bi-chevron-down'></span>
+								</Button>
+							</div>
+						</DrawerHeader>
+						<DrawerBody className='px-0'>
+							<div className='row mx-auto pt-3 px-3'>
+								{imageUrl && (
+									<div className='col-3'>
+										<OptimizedImage
+											src={imageUrl}
+											alt='Post Image'
+											width={120}
+											height={65}
+											className='object-fit-contain img-fluid'
+										/>
+									</div>
+								)}
+								<div className='col-9'>
+									<h2 className='h6 fw-normal'>Check this out!</h2>
+									<h2 className='h6'>{name}</h2>
+								</div>
+							</div>
+							<hr />
+							<div className='py-3 d-flex justify-content-around align-items-center'>
+								<a
+									href={facebookSharerLink(fullShareUrl, name)}
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Tooltip
+										className='tooltip tooltip-md'
+										label={'Share on Facebook'}
+										hasArrow
+										placement='top'
+										fontSize='md'
+										mb='6'
+									>
+										<span className='d-flex flex-column align-items-center justify-content-center gap-2 w-100 h-100'>
+											<span className='bi bi-facebook fs-4 text-medium-gray'></span>
+											<span className='small mt-2'>Facebook</span>
+										</span>
+									</Tooltip>
+								</a>
+								<a
+									href={twitterSharerLink(
+										fullShareUrl,
+										'Check out this post on Osirus AI'
+									)}
+									target='_blank'
+									rel='noopener noreferrer'
+									className='mt-n1'
+								>
+									<Tooltip
+										className='tooltip tooltip-md'
+										label={'Share on X'}
+										hasArrow
+										placement='top'
+										fontSize='md'
+										mb='6'
+									>
+										<span className='d-flex flex-column align-items-center justify-content-center gap-2 w-100 h-100'>
+											<span className='text-medium-gray'>
+												<XTwitterIcon width='20px' height='20px' />
+											</span>
+											<span className='small mt-1'>X</span>
+										</span>
+									</Tooltip>
+								</a>
+								<a
+									href={linkedinSharerLink(fullShareUrl, name)}
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Tooltip
+										className='tooltip tooltip-md'
+										label={'Share on LinkedIn'}
+										hasArrow
+										placement='top'
+										fontSize='md'
+										mb='6'
+									>
+										<span className='d-flex flex-column align-items-center justify-content-center gap-2 w-100 h-100'>
+											<span className='bi bi-linkedin fs-4 text-medium-gray'></span>
+											<span className='small mt-2'>LinkedIn</span>
+										</span>
+									</Tooltip>
+								</a>
+								<a
+									href={mailSharerLink(fullShareUrl, 'Link on Osirus AI News')}
+									target='_blank'
+									rel='noopener noreferrer'
+								>
+									<Tooltip
+										className='tooltip tooltip-md'
+										label={'Share by Email'}
+										hasArrow
+										placement='top'
+										fontSize='md'
+										mb='6'
+									>
+										<span className='d-flex flex-column align-items-center justify-content-center gap-2 w-100 h-100'>
+											<span className='bi bi-envelope fs-4 text-medium-gray'></span>
+											<span className='small mt-2'>Mail</span>
+										</span>
+									</Tooltip>
+								</a>
+								<button
+									onClick={() => copyToClipboard(fullShareUrl)}
+									className='btn no-min-size'
+								>
+									<Tooltip
+										className='tooltip tooltip-md'
+										label={'Copy URL'}
+										hasArrow
+										placement='top'
+										fontSize='md'
+										mb='6'
+									>
+										<span className='d-flex flex-column align-items-center justify-content-center gap-2 w-100 h-100'>
+											<span className='bi bi-files fs-4 text-medium-gray'></span>
+											<span className='small mt-2'>Copy URL</span>
+										</span>
+									</Tooltip>
+								</button>
+							</div>
+						</DrawerBody>
+					</div>
+				</DrawerContent>
+			</Drawer>
+		</>
+	)
+}
+
+export default SharerActionBox