@spacemade/ui 0.0.1

package/src/components/category/modal/UpdateCategoryModal.tsx

@@ -0,0 +1,170 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import {
+	Drawer,
+	DrawerBody,
+	DrawerCloseButton,
+	DrawerContent,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import { Category, CategoryPayload } from '@store/model'
+import { useCategoryStore } from '@hooks'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE, SLUG_REGEX } from '@helpers/constants'
+import { transformToURLFormat } from '@helpers/string'
+
+interface FormValues extends FieldValues {
+	slug: string
+	name: string
+}
+
+export const UpdateCategoryModal = ({
+	category,
+	isOpen,
+	onClose,
+}: {
+	category?: Category
+	isOpen: boolean
+	onClose: () => void
+}) => {
+	const {
+		saveCategory,
+		isCategorySlugOrNameAvailable,
+		generateUniqueCategorySlug,
+	} = useCategoryStore()
+
+	const {
+		register,
+		handleSubmit,
+		setError,
+		getValues,
+		clearErrors,
+		reset,
+		formState: { errors, isSubmitting },
+	} = useForm<FormValues>({
+		defaultValues: {
+			slug: category?.slug || '',
+			name: category?.name || '',
+		},
+	})
+
+	useEffect(() => {
+		reset({
+			slug: category?.slug || '',
+			name: category?.name || '',
+		})
+	}, [category, reset])
+
+	const onSubmit: SubmitHandler<FormValues> = async (data) => {
+		try {
+			if (!category) {
+				const slugFromName = transformToURLFormat(data.name)
+				const slug = await generateUniqueCategorySlug(slugFromName)
+				data.slug = slug
+			}
+
+			await saveCategory(!category, { ...category, ...data } as CategoryPayload)
+			reset()
+			toast.success('Your category has been saved successfully')
+			onClose()
+		} catch (error: any) {
+			toast.error(
+				error.status !== HTTPErrorStatus.INTERNAL_SERVER_ERROR
+					? error.data.message
+					: DEFAULT_ERROR_MESSAGE
+			)
+			setError('server-error', { type: 'custom', message: 'server-error' })
+		}
+	}
+
+	return (
+		<Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+			<DrawerOverlay />
+			<DrawerContent className='drawer'>
+				<DrawerCloseButton />
+				<DrawerHeader>{!category ? 'Add' : 'Update'} Category</DrawerHeader>
+
+				<DrawerBody>
+					<form id='tag-update-form' onSubmit={handleSubmit(onSubmit)}>
+						{category && (
+							<div className='w-100 mb-4 mt-3'>
+								<Input
+									register={register('slug', {
+										required: 'This field is required',
+										pattern: {
+											value: SLUG_REGEX,
+											message:
+												'The slug must only contain lowercase letters, numbers, and hyphen',
+										},
+										minLength: {
+											value: 2,
+											message: 'Your tag slug must have at least 2 characters',
+										},
+										validate: async (value) =>
+											await isCategorySlugOrNameAvailable(
+												value,
+												'slug',
+												category
+											),
+									})}
+									customErrorMessage='This slug is already taken'
+									errors={errors}
+									placeholder='Enter your tag slug'
+									label='Slug'
+									getValues={getValues}
+								/>
+							</div>
+						)}
+						<div className={`w-100 mb-4 ${!category ? 'mt-3' : ''}`}>
+							<Input
+								register={register('name', {
+									required: 'This field is required',
+									minLength: {
+										value: 2,
+										message:
+											'Your category name must have at least 2 characters',
+									},
+									validate: async (value) =>
+										await isCategorySlugOrNameAvailable(
+											value,
+											'name',
+											category
+										),
+								})}
+								customErrorMessage='This name is already taken'
+								errors={errors}
+								placeholder='Enter your category name'
+								label='Name'
+								getValues={getValues}
+							/>
+						</div>
+					</form>
+				</DrawerBody>
+
+				<DrawerFooter>
+					<Button ariaLabel='Cancel' onClick={onClose}>
+						Cancel
+					</Button>
+					<Button
+						type='submit'
+						className='text-white'
+						ariaLabel='Save category Changes'
+						color='primary'
+						form='tag-update-form'
+						isLoading={isSubmitting}
+						disabled={isSubmitting}
+						onClick={() => clearErrors(['server-error'])}
+					>
+						Save
+					</Button>
+				</DrawerFooter>
+			</DrawerContent>
+		</Drawer>
+	)
+}

package/src/components/category/table/CategoryTable.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable @next/next/no-img-element */
+import { SyntheticEvent, useState } from 'react'
+import { useRouter } from '@lib/next-router'
+import { useDisclosure } from '@chakra-ui/react'
+import isEmpty from 'lodash/isEmpty'
+import { Category } from '@store/model'
+import { useGetPostCategoriesQuery } from '@store/slice/api/categoriesApiSlice'
+import { useCategoryStore } from '@hooks'
+import { UpdateCategoryModal } from '@components/category/modal/UpdateCategoryModal'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import TableFilter from '@components/common/table/TableFilter'
+import { truncateString } from '@helpers/string'
+
+export const CategoryTable = () => {
+	const {
+		query: { nameLike },
+	} = useRouter()
+
+	const {
+		isOpen: isDialogOpen,
+		onOpen: onOpenDialog,
+		onClose: onCloseDialog,
+	} = useDisclosure()
+
+	const {
+		isOpen: isOpenUpdateModal,
+		onOpen: onOpenUpdateModal,
+		onClose: onCloseUpdateModal,
+	} = useDisclosure()
+
+	const { removeCategory } = useCategoryStore()
+
+	const {
+		data: categories,
+		isFetching,
+		isLoading,
+	} = useGetPostCategoriesQuery({
+		nameLike: (nameLike?.toString() as string) || undefined,
+	})
+
+	const [activeCategory, setActiveCategory] = useState<Category | null>(null)
+
+	const onRowClick = (event: SyntheticEvent, category: Category) => {
+		const parent = (event.target as HTMLElement).closest('[data-type]')
+		const type = parent?.getAttribute('data-type')
+		setActiveCategory(category)
+
+		if (type === 'action') {
+			onOpenDialog()
+			return
+		}
+
+		onOpenUpdateModal()
+	}
+
+	return (
+		<>
+			<TableFilter
+				type='category'
+				isStatusFilterHidden
+				isCategoryFilterHidden
+			/>
+
+			<div className='mt-4'>
+				<table className='table'>
+					<thead>
+						<tr>
+							<th scope='col' className='w-lg-90-down'>
+								Name
+							</th>
+							<th scope='col' className='opacity-0 w-xs-100p'>
+								Actions
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						{categories &&
+							!isFetching &&
+							categories.map((category, key) => (
+								<tr
+									key={key}
+									className='pointer'
+									onClick={(e) => onRowClick(e, category)}
+								>
+									<td className='align-middle'>
+										{truncateString(category.name, 80)}
+									</td>
+									<td className='text-center align-middle'>
+										<Button
+											className='no-min-size w-xs-50p h-100 bg-hover-background'
+											data-type='action'
+										>
+											<span className='bi bi-trash'></span>
+										</Button>
+									</td>
+								</tr>
+							))}
+					</tbody>
+				</table>
+
+				{isFetching && (
+					<div className='w-100 d-flex justify-content-center py-4'>
+						<Spinner color='primary' />
+					</div>
+				)}
+
+				{!isLoading && !isFetching && isEmpty(categories) && (
+					<div className='d-flex flex-column align-items-center justify-content-center'>
+						{nameLike ? (
+							<p>{`There are no categories to show that match your search`}</p>
+						) : (
+							<p>{`You don't have any categories yet`}</p>
+						)}
+					</div>
+				)}
+			</div>
+
+			{activeCategory && (
+				<>
+					<UpdateCategoryModal
+						category={activeCategory}
+						isOpen={isOpenUpdateModal}
+						onClose={onCloseUpdateModal}
+					/>
+					<DeleteDialog
+						isOpen={isDialogOpen}
+						onClose={onCloseDialog}
+						entityDescription={`${activeCategory.name}`}
+						onDelete={() => removeCategory(activeCategory)}
+					/>
+				</>
+			)}
+		</>
+	)
+}

package/src/components/common/Icons/BrainCircuitIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+export function BrainCircuitIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M137.9 48.3C145 20.5 170.1 0 200 0c24.1 0 45.1 13.3 56 33c10.9-19.7 31.9-33 56-33c29.9 0 55 20.5 62.1 48.3C406.6 51.3 432 78.7 432 112c0 6.7-1 13.1-2.9 19.1c29.5 9 50.9 36.4 50.9 68.9c0 12.4-3.1 24.1-8.7 34.3C495.6 248 512 274.1 512 304c0 33.3-20.4 61.9-49.4 73.9c.9 4.6 1.4 9.3 1.4 14.1c0 39.8-32.2 72-72 72c-3.7 0-7.2-.3-10.8-.8C373 491.4 346.9 512 316 512c-26 0-48.5-14.6-60-36c-11.5 21.4-34 36-60 36c-30.9 0-57-20.6-65.2-48.8c-3.5 .5-7.1 .8-10.8 .8c-39.8 0-72-32.2-72-72c0-4.8 .5-9.5 1.4-14.1C20.4 365.9 0 337.3 0 304c0-29.9 16.4-56 40.7-69.7C35.1 224.1 32 212.4 32 200c0-32.4 21.4-59.8 50.9-68.9C81 125.1 80 118.7 80 112c0-33.3 25.4-60.7 57.9-63.7zM200 16c-24.2 0-44.2 17.9-47.5 41.1c-.6 4-4 6.9-8 6.9l-.5 0c-26.5 0-48 21.5-48 48c0 7.7 1.8 14.9 5 21.3c1.1 2.3 1.1 5-.1 7.2s-3.3 3.8-5.8 4.2C68.4 149 48 172.1 48 200c0 12.3 4 23.6 10.7 32.9c1.4 2 1.9 4.5 1.2 6.9s-2.4 4.3-4.6 5.2C32.2 254.6 16 277.4 16 304c0 28.8 19 53.2 45.3 61.2c2 .6 3.7 2 4.7 3.9s1.2 4.1 .6 6.1C64.9 380.5 64 386.2 64 392c0 30.9 25.1 56 56 56c5.1 0 10-.7 14.7-1.9c2.2-.6 4.5-.2 6.4 1s3.2 3.2 3.6 5.4c4 24.7 25.5 43.5 51.3 43.5c27.6 0 50.1-21.4 51.9-48.5c0-.3 .1-.6 .1-.9V444 288H192c-13.3 0-24 10.7-24 24v9c13.8 3.6 24 16.1 24 31c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-14.9 10.2-27.4 24-31v-9c0-22.1 17.9-40 40-40h56V152H207c-3.6 13.8-16.1 24-31 24c-17.7 0-32-14.3-32-32s14.3-32 32-32c14.9 0 27.4 10.2 31 24h41V64c0-26.5-21.5-48-48-48zm64 136V360h73c3.6-13.8 16.1-24 31-24c17.7 0 32 14.3 32 32s-14.3 32-32 32c-14.9 0-27.4-10.2-31-24H264v68 2.6c.1 .3 .1 .6 .1 .9c1.8 27.1 24.3 48.5 51.9 48.5c25.8 0 47.3-18.8 51.3-43.5c.4-2.2 1.7-4.2 3.6-5.4s4.2-1.6 6.4-1c4.7 1.3 9.6 1.9 14.7 1.9c30.9 0 56-25.1 56-56c0-5.8-.9-11.5-2.5-16.7c-.6-2-.4-4.2 .6-6.1s2.7-3.3 4.7-3.9c26.2-8 45.3-32.4 45.3-61.2c0-26.6-16.2-49.4-39.3-59.1c-2.3-.9-4-2.9-4.6-5.2s-.2-4.9 1.2-6.9C460 223.6 464 212.3 464 200c0-27.9-20.4-51-47-55.3c-2.5-.4-4.7-2-5.8-4.2s-1.2-4.9-.1-7.2c3.2-6.4 5-13.6 5-21.3c0-26.5-21.5-48-48-48l-.5 0c-4 0-7.4-2.9-8-6.9C356.2 33.9 336.2 16 312 16c-26.5 0-48 21.5-48 48v72h56c22.1 0 40 17.9 40 40v17c13.8 3.6 24 16.1 24 31c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-14.9 10.2-27.4 24-31V176c0-13.3-10.7-24-24-24H264zm-88 8a16 16 0 1 0 0-32 16 16 0 1 0 0 32zM160 368a16 16 0 1 0 0-32 16 16 0 1 0 0 32zM368 224a16 16 0 1 0 -32 0 16 16 0 1 0 32 0zm0 160a16 16 0 1 0 0-32 16 16 0 1 0 0 32z' />
+		</svg>
+	)
+}

package/src/components/common/Icons/MagnifyingGlassChartIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+export function MagnifyingGlassChartIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M208 16a192 192 0 1 1 0 384 192 192 0 1 1 0-384zm0 400c54.6 0 104.2-21 141.3-55.4l149 149c3.1 3.1 8.2 3.1 11.3 0s3.1-8.2 0-11.3l-149-149C395 312.2 416 262.6 416 208C416 93.1 322.9 0 208 0S0 93.1 0 208S93.1 416 208 416zM112 192c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32s32-14.3 32-32V224c0-17.7-14.3-32-32-32zm96-96c-17.7 0-32 14.3-32 32V288c0 17.7 14.3 32 32 32s32-14.3 32-32V128c0-17.7-14.3-32-32-32zm96 64c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V192c0-17.7-14.3-32-32-32zM112 208c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16s-16-7.2-16-16V224c0-8.8 7.2-16 16-16zm96-96c8.8 0 16 7.2 16 16V288c0 8.8-7.2 16-16 16s-16-7.2-16-16V128c0-8.8 7.2-16 16-16zm96 64c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16z' />
+		</svg>
+	)
+}

package/src/components/common/Icons/PeopleGroupIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+export function PeopleGroupIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 640 512'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M88 88a40 40 0 1 1 80 0A40 40 0 1 1 88 88zm96 0A56 56 0 1 0 72 88a56 56 0 1 0 112 0zm288 0a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zm96 0A56 56 0 1 0 456 88a56 56 0 1 0 112 0zM64 256c-4.4 0-8 3.6-8 8v98.2c-24.2-16.9-40-45-40-76.7c0-51.7 41.9-93.5 93.5-93.5h36.9c18.8 0 36.3 5.6 51 15.1c3.7-4 7.6-7.8 11.7-11.4c-17.8-12.4-39.4-19.7-62.7-19.7H109.5C49 176 0 225 0 285.5c0 41.1 22.6 76.8 56 95.6V432c0 17.7 14.3 32 32 32h80c17.7 0 32-14.3 32-32V403.6c-5.9-6.2-11.3-12.8-16-20V432c0 8.8-7.2 16-16 16H88c-8.8 0-16-7.2-16-16V264c0-4.4-3.6-8-8-8zM440 432c0 17.7 14.3 32 32 32h80c17.7 0 32-14.3 32-32V381.1c33.4-18.7 56-54.5 56-95.6C640 225 591 176 530.5 176H493.5c-23.3 0-44.9 7.3-62.7 19.7c4.1 3.6 8 7.4 11.7 11.4c14.7-9.6 32.2-15.1 51-15.1h36.9c51.7 0 93.5 41.9 93.5 93.5c0 31.7-15.8 59.8-40 76.7V264c0-4.4-3.6-8-8-8s-8 3.6-8 8V432c0 8.8-7.2 16-16 16H472c-8.8 0-16-7.2-16-16V383.6c-4.7 7.1-10.1 13.8-16 20V432zM272 96a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm112 0A64 64 0 1 0 256 96a64 64 0 1 0 128 0zM256 272c-4.4 0-8 3.6-8 8v98.2c-24.2-16.9-40-45-40-76.7c0-51.7 41.9-93.5 93.5-93.5h36.9c51.7 0 93.5 41.9 93.5 93.5c0 31.7-15.8 59.8-40 76.7V280c0-4.4-3.6-8-8-8s-8 3.6-8 8V448c0 8.8-7.2 16-16 16H280c-8.8 0-16-7.2-16-16V280c0-4.4-3.6-8-8-8zm-8 125.1V448c0 17.7 14.3 32 32 32h80c17.7 0 32-14.3 32-32V397.1c33.4-18.7 56-54.5 56-95.6C448 241 399 192 338.5 192H301.5C241 192 192 241 192 301.5c0 41.1 22.6 76.8 56 95.6z' />
+		</svg>
+	)
+}

package/src/components/common/Icons/ScrewdriverWrenchIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+export function ScrewdriverWrenchIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M7 47L47 7c8.5-8.5 22-9.4 31.6-2.1l104 80c5.9 4.5 9.4 11.6 9.4 19v64 8 4.7L287.3 276c30.3-24.7 75-22.9 103.3 5.4l112 112c12.5 12.5 12.5 32.8 0 45.3l-64 64c-12.5 12.5-32.8 12.5-45.3 0l-112-112c-28.3-28.3-30-73-5.4-103.3L180.7 192H176h-8H104c-7.5 0-14.5-3.5-19-9.4L5 78.6C-2.4 69.1-1.5 55.6 7 47zM168 176h8v-8V104c0-2.5-1.2-4.8-3.1-6.3l-104-80c-3.2-2.4-7.7-2.2-10.5 .7l-40 40c-2.8 2.8-3.1 7.3-.7 10.5l80 104c1.5 2 3.9 3.1 6.3 3.1h64zM379.3 292.7c-23.9-23.9-62.7-23.9-86.6 0s-23.9 62.7 0 86.6l112 112c6.2 6.2 16.4 6.2 22.6 0l64-64c6.2-6.2 6.2-16.4 0-22.6l-112-112zM21.5 386.5L170.1 237.9l11.3 11.3L32.9 397.8C22.1 408.6 16 423.2 16 438.5C16 470.2 41.8 496 73.5 496c15.3 0 29.9-6.1 40.7-16.9L230.2 363.2c1.5 5.7 3.4 11.4 5.8 16.8L125.5 490.5C111.7 504.3 93 512 73.5 512C32.9 512 0 479.1 0 438.5c0-19.5 7.7-38.2 21.5-52zM496 160c0-17.2-3-33.6-8.5-48.9L416 182.6c-6 6-14.1 9.4-22.6 9.4H352c-17.7 0-32-14.3-32-32V118.6c0-8.5 3.4-16.6 9.4-22.6l71.5-71.5C385.6 19 369.2 16 352 16c-50.7 0-95.3 26.2-121 65.8l-12.7-9.8C246.9 28.6 296.1 0 352 0c20.1 0 39.4 3.7 57.1 10.5c10 3.8 11.8 16.5 4.3 24.1l-72.7 72.7c-3 3-4.7 7.1-4.7 11.3V160c0 8.8 7.2 16 16 16h41.4c4.2 0 8.3-1.7 11.3-4.7l72.7-72.7c7.6-7.6 20.3-5.7 24.1 4.3c6.8 17.7 10.5 37 10.5 57.1c0 53.8-26.5 101.3-67.2 130.3l-11.5-11.5C471.2 252.9 496 209.3 496 160zM80 416a16 16 0 1 1 0 32 16 16 0 1 1 0-32z' />
+		</svg>
+	)
+}

package/src/components/common/Icons/SendMessageIcon.tsx

@@ -0,0 +1,15 @@
+import { SVGProps } from 'react'
+
+export function SendMessageIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg 
+			xmlns="http://www.w3.org/2000/svg" 
+			height="1em" 
+			viewBox="0 0 512 512"
+			fill='currentColor'
+			{...props}
+		>
+			<path d="M49.9 27.8C15.1 12.7-19.2 50.1-1.2 83.5L68.1 212.2c4.4 8.3 12.6 13.8 21.9 15c0 0 0 0 0 0l176 22c3.4 .4 6 3.3 6 6.7s-2.6 6.3-6 6.7l-176 22s0 0 0 0c-9.3 1.2-17.5 6.8-21.9 15L-1.2 428.5c-18 33.4 16.3 70.8 51.1 55.7L491.8 292.7c32.1-13.9 32.1-59.5 0-73.4L49.9 27.8z"/>
+		</svg>
+	)
+}

package/src/components/common/Icons/ShareIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react'
+
+export function ShareIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 144 144"
+			fill='currentColor'
+			{...props}
+		>
+	<path d="M109.95,55.73c-5.27,0-10,2.35-13.2,6.06L51.71,30.71c1.05-2.24,1.64-4.74,1.64-7.37
+		c0-9.61-7.82-17.44-17.44-17.44s-17.44,7.82-17.44,17.44s7.82,17.44,17.44,17.44c5.53,0,10.46-2.59,13.66-6.62l44.9,30.98
+		c-1.25,2.4-1.96,5.13-1.96,8.02c0,3.04,0.79,5.9,2.16,8.4l-44.05,30.4c-3.1-4.85-8.53-8.08-14.7-8.08
+		c-9.61,0-17.44,7.82-17.44,17.44c0,9.61,7.82,17.44,17.44,17.44s17.44-7.82,17.44-17.44c0-1.98-0.34-3.89-0.95-5.66l44.62-30.79
+		c3.19,3.52,7.8,5.74,12.92,5.74c9.61,0,17.44-7.82,17.44-17.44C127.38,63.55,119.56,55.73,109.95,55.73z M35.92,36.72
+		c-7.38,0-13.39-6.01-13.39-13.39S28.53,9.95,35.92,9.95S49.3,15.95,49.3,23.34S43.3,36.72,35.92,36.72z M35.92,134.7
+		c-7.38,0-13.39-6.01-13.39-13.39c0-7.38,6.01-13.39,13.39-13.39s13.39,6.01,13.39,13.39C49.3,128.7,43.3,134.7,35.92,134.7z
+		M109.95,86.55c-7.38,0-13.39-6.01-13.39-13.39c0-7.38,6.01-13.39,13.39-13.39s13.39,6.01,13.39,13.39
+		C123.34,80.54,117.33,86.55,109.95,86.55z"/>
+		</svg>
+	)
+}

package/src/components/common/Icons/XTwitterIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react'
+
+export function XTwitterIcon(props: SVGProps<SVGSVGElement>) {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			fill='currentColor'
+			{...props}
+		>
+			<path d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z' />
+		</svg>
+	)
+}

package/src/components/common/Image/OptimizedImage.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import NextImage, { ImageLoaderProps, ImageProps } from 'next/image'
+
+const imageLoader = ({ src, width, quality }: ImageLoaderProps) => {
+	return `${src}?format=auto&width=${width}${quality ? `&quality=${quality}` : ''}`
+}
+
+type OptimizedImageProps = Omit<ImageProps, 'loader'>
+
+export function OptimizedImage(props: OptimizedImageProps) {
+	return (
+		<NextImage
+			loader={imageLoader}
+			{...props}
+		/>
+	)
+}

package/src/components/common/SettingsPanel.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react';
+
+type SettingsPanelProps = {
+  title?: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  children?: ReactNode;
+  fabTitle?: string;
+};
+
+export const SettingsPanel = ({
+  title = 'Settings',
+  isOpen,
+  onOpen,
+  onClose,
+  children,
+  fabTitle,
+}: SettingsPanelProps) => {
+  return (
+    <>
+      <style jsx global>{`
+        .settings-fab {
+          position: fixed;
+          right: 16px;
+          bottom: 16px;
+          z-index: 1040;
+          width: 44px;
+          height: 44px;
+          border-radius: 999px;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          background: #fff;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+          cursor: pointer;
+        }
+
+        .settings-panel {
+          position: fixed;
+          right: 16px;
+          bottom: 16px;
+          z-index: 2000;
+          background: #fff;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
+          border-radius: 12px;
+          padding: 10px 12px;
+          min-width: 280px;
+          max-width: 360px;
+          max-height: 70vh;
+          overflow: auto;
+          pointer-events: auto;
+        }
+        .settings-panel * {
+          pointer-events: auto;
+        }
+
+        .settings-panel-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-weight: 600;
+          font-size: 13px;
+          margin-bottom: 8px;
+        }
+
+        .settings-close {
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          padding: 2px 6px;
+        }
+
+        .settings-section-title {
+          font-size: 12px;
+          font-weight: 600;
+          color: #4a4a4a;
+          margin: 8px 0 6px;
+        }
+        .settings-help {
+          font-size: 11px;
+          color: #6c757d;
+        }
+      `}</style>
+
+      {isOpen ? (
+        <div className="settings-panel" role="complementary" aria-label="Settings panel">
+          <div className="settings-panel-header">
+            <span>{title}</span>
+            <button
+              type="button"
+              style={{ minWidth: '10px' }}
+              className="settings-close"
+              aria-label="Close settings panel"
+              onClick={onClose}
+              title="Close"
+            >
+              <i className="bi bi-x-lg" />
+            </button>
+          </div>
+          {children}
+        </div>
+      ) : (
+        <button
+          type="button"
+          style={{ minWidth: '10px' }}
+          className="settings-fab"
+          aria-label="Open settings panel"
+          onClick={onOpen}
+          title={fabTitle || title}
+        >
+          <i className="bi bi-sliders" />
+        </button>
+      )}
+    </>
+  );
+};

package/src/components/common/badge/Badge.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { ThemeColorsKeys } from '@helpers/theme/colors'
+
+const BADGE_TYPES = {
+	success: {
+		textColor: 'white',
+		bgColor: 'success',
+		icon: 'bi bi-check',
+		label: 'Success',
+	},
+	error: {
+		textColor: 'dark',
+		bgColor: 'danger',
+		icon: 'bi bi-exclamation-circle',
+		label: 'Error',
+	},
+	pending: {
+		textColor: 'dark',
+		bgColor: 'warning',
+		icon: 'bi bi-clock',
+		label: 'Pending',
+	},
+}
+
+const Badge = ({
+	textColor,
+	bgColor,
+	label,
+	icon,
+	className,
+	isOutline,
+	type,
+}: {
+	textColor?: ThemeColorsKeys
+	bgColor?: ThemeColorsKeys
+	label?: string
+	icon?: string
+	className?: string
+	isOutline?: boolean
+	type?: keyof typeof BADGE_TYPES
+}) => {
+	const options = useMemo(() => {
+		if (type) {
+			return {
+				...BADGE_TYPES[type],
+			}
+		}
+
+		return {
+			textColor,
+			bgColor,
+			label,
+			icon,
+		}
+	}, [type, textColor, bgColor, label, icon])
+
+	return (
+		<span
+			className={`small py-1 px-2 rounded-pill text-center text-capitalize ${
+				isOutline ? 'border border' : 'bg'
+			}-${options.bgColor} text-${options.textColor} ${className}`}
+		>
+			{options.icon && <span className={options.icon + 'me-2'}></span>}
+			{options.label}
+		</span>
+	)
+}
+
+export default Badge

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

@@ -0,0 +1,43 @@
+export const BackgroundImageBlock = ({
+	direction,
+	imgSrc,
+	imgAlt,
+	imgClass,
+	textClass,
+	header,
+	content,
+} : {
+	direction: string,
+	imgSrc: string,
+	imgAlt: string,
+	imgClass?: string,
+	textClass?: string
+	header: string,
+	content: JSX.Element,
+}) => {
+	return (
+		<div className={imgClass} aria-label={imgAlt} style={{ background: `url(${imgSrc}) 0 0 no-repeat`, }}>
+			<div className="container">
+				<div className="row align-items-center py-7 mt-7">
+					{ direction === 'img-left' ? (
+						<>
+							<div className={`col-md-5 ms-auto me-lg-11 ${textClass}`}>
+								<h2>{ header }</h2>
+								{ content }
+							</div>
+						</>
+					) : (
+						<>
+							<div className={`col-md-5 ${textClass}`}>
+								<h2>{ header }</h2>
+								{ content }
+							</div>
+						</>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default BackgroundImageBlock