chore: better Prettier config for easier reviews
This commit is contained in:
@ -1,27 +1,27 @@
|
||||
import Translation from 'next-translate/Trans'
|
||||
import Translation from "next-translate/Trans"
|
||||
|
||||
import { Link } from './design/Link'
|
||||
import { TextSpecial } from './design/TextSpecial'
|
||||
import { Link } from "./design/Link"
|
||||
import { TextSpecial } from "./design/TextSpecial"
|
||||
|
||||
export const About: React.FC = () => {
|
||||
return (
|
||||
<section className='text-center mt-6'>
|
||||
<h1 className='text-4xl'>{'<Form />'}</h1>
|
||||
<h2 className='text-xl dark:text-gray-300 text-gray-600 mt-4'>
|
||||
npm install --save{' '}
|
||||
<section className="text-center mt-6">
|
||||
<h1 className="text-4xl">{"<Form />"}</h1>
|
||||
<h2 className="text-xl dark:text-gray-300 text-gray-600 mt-4">
|
||||
npm install --save{" "}
|
||||
<Link
|
||||
href='https://www.npmjs.com/package/react-component-form'
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
href="https://www.npmjs.com/package/react-component-form"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
react-component-form
|
||||
</Link>
|
||||
</h2>
|
||||
|
||||
<p className='max-w-lg mt-6 text-base' data-cy='main-description'>
|
||||
<p className="max-w-lg mt-6 text-base" data-cy="main-description">
|
||||
<Translation
|
||||
i18nKey='common:about'
|
||||
components={[<TextSpecial key='special' />]}
|
||||
i18nKey="common:about"
|
||||
components={[<TextSpecial key="special" />]}
|
||||
/>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
'use client'
|
||||
"use client"
|
||||
|
||||
import { Form, useForm } from 'react-component-form'
|
||||
import type { HandleUseFormCallback } from 'react-component-form'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { Form, useForm } from "react-component-form"
|
||||
import type { HandleUseFormCallback } from "react-component-form"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
|
||||
import { Input } from './design/Input'
|
||||
import { Button } from './design/Button'
|
||||
import { useFormTranslation } from '../hooks/useFormTranslation'
|
||||
import { userSchema } from '../models/User'
|
||||
import { FormState } from './design/FormState'
|
||||
import { Input } from "./design/Input"
|
||||
import { Button } from "./design/Button"
|
||||
import { useFormTranslation } from "../hooks/useFormTranslation"
|
||||
import { userSchema } from "../models/User"
|
||||
import { FormState } from "./design/FormState"
|
||||
|
||||
const fakeServerRequest = async (ms: number): Promise<void> => {
|
||||
return await new Promise((resolve) => {
|
||||
@ -23,47 +23,47 @@ export const FormExample: React.FC = () => {
|
||||
|
||||
const onSubmit: HandleUseFormCallback<typeof userSchema> = async (
|
||||
formData,
|
||||
formElement
|
||||
formElement,
|
||||
) => {
|
||||
await fakeServerRequest(2_000)
|
||||
console.log('onSubmit:', formData)
|
||||
console.log("onSubmit:", formData)
|
||||
formElement.reset()
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'common:success-message'
|
||||
type: "success",
|
||||
message: "common:success-message",
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
<Form
|
||||
className='mt-6 w-[90%] max-w-xs'
|
||||
className="mt-6 w-[90%] max-w-xs"
|
||||
noValidate
|
||||
onSubmit={handleUseForm(onSubmit)}
|
||||
>
|
||||
<Input
|
||||
type='text'
|
||||
placeholder={t('common:name')}
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
type="text"
|
||||
placeholder={t("common:name")}
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type='text'
|
||||
placeholder='Email'
|
||||
name='email'
|
||||
label='Email'
|
||||
type="text"
|
||||
placeholder="Email"
|
||||
name="email"
|
||||
label="Email"
|
||||
error={getFirstErrorTranslation(errors.email)}
|
||||
/>
|
||||
|
||||
<Button className='mt-6 w-full' type='submit' data-cy='submit'>
|
||||
<Button className="mt-6 w-full" type="submit" data-cy="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<FormState
|
||||
id='message'
|
||||
id="message"
|
||||
state={fetchState}
|
||||
message={message != null ? t(message) : undefined}
|
||||
/>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { Language } from './Language'
|
||||
import { SwitchTheme } from './SwitchTheme'
|
||||
import { Language } from "./Language"
|
||||
import { SwitchTheme } from "./SwitchTheme"
|
||||
|
||||
export const Header: React.FC = () => {
|
||||
return (
|
||||
<header className='flex justify-center mt-6'>
|
||||
<header className="flex justify-center mt-6">
|
||||
<Language />
|
||||
<SwitchTheme />
|
||||
</header>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
export const Arrow: React.FC = () => {
|
||||
return (
|
||||
<svg
|
||||
width='12'
|
||||
height='8'
|
||||
viewBox='0 0 12 8'
|
||||
fill='none'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width="12"
|
||||
height="8"
|
||||
viewBox="0 0 12 8"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
className='fill-current text-black dark:text-white'
|
||||
d='M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z'
|
||||
className="fill-current text-black dark:text-white"
|
||||
d="M9.8024 0.292969L5.61855 4.58597L1.43469 0.292969L0.0566406 1.70697L5.61855 7.41397L11.1805 1.70697L9.8024 0.292969Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Image from 'next/image'
|
||||
import Image from "next/image"
|
||||
|
||||
export interface LanguageFlagProps {
|
||||
language: string
|
||||
@ -16,7 +16,7 @@ export const LanguageFlag: React.FC<LanguageFlagProps> = (props) => {
|
||||
src={`/images/languages/${language}.svg`}
|
||||
alt={language}
|
||||
/>
|
||||
<p data-cy='language-flag-text' className='mx-2 text-base'>
|
||||
<p data-cy="language-flag-text" className="mx-2 text-base">
|
||||
{language.toUpperCase()}
|
||||
</p>
|
||||
</>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { useCallback, useEffect, useState, useRef } from 'react'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import setLanguage from 'next-translate/setLanguage'
|
||||
import classNames from 'clsx'
|
||||
import { useCallback, useEffect, useState, useRef } from "react"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import setLanguage from "next-translate/setLanguage"
|
||||
import classNames from "clsx"
|
||||
|
||||
import i18n from '../../../i18n.json'
|
||||
import { Arrow } from './Arrow'
|
||||
import { LanguageFlag } from './LanguageFlag'
|
||||
import i18n from "../../../i18n.json"
|
||||
import { Arrow } from "./Arrow"
|
||||
import { LanguageFlag } from "./LanguageFlag"
|
||||
|
||||
export const Language: React.FC = () => {
|
||||
const { lang: currentLanguage } = useTranslation()
|
||||
@ -28,10 +28,10 @@ export const Language: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
window.document.addEventListener('click', handleClickEvent)
|
||||
window.document.addEventListener("click", handleClickEvent)
|
||||
|
||||
return () => {
|
||||
return window.removeEventListener('click', handleClickEvent)
|
||||
return window.removeEventListener("click", handleClickEvent)
|
||||
}
|
||||
}, [])
|
||||
|
||||
@ -40,11 +40,11 @@ export const Language: React.FC = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex cursor-pointer flex-col items-center justify-center'>
|
||||
<div className="flex cursor-pointer flex-col items-center justify-center">
|
||||
<div
|
||||
ref={languageClickRef}
|
||||
data-cy='language-click'
|
||||
className='mr-5 flex items-center'
|
||||
data-cy="language-click"
|
||||
className="mr-5 flex items-center"
|
||||
onClick={handleHiddenMenu}
|
||||
>
|
||||
<LanguageFlag language={currentLanguage} />
|
||||
@ -52,10 +52,10 @@ export const Language: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<ul
|
||||
data-cy='languages-list'
|
||||
data-cy="languages-list"
|
||||
className={classNames(
|
||||
'absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag',
|
||||
{ hidden: hiddenMenu }
|
||||
"absolute top-14 z-10 mt-3 mr-4 flex w-24 list-none flex-col items-center justify-center rounded-lg bg-white p-0 shadow-lightFlag dark:bg-black dark:shadow-darkFlag",
|
||||
{ hidden: hiddenMenu },
|
||||
)}
|
||||
>
|
||||
{i18n.locales.map((language, index) => {
|
||||
@ -65,7 +65,7 @@ export const Language: React.FC = () => {
|
||||
return (
|
||||
<li
|
||||
key={index}
|
||||
className='flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20'
|
||||
className="flex h-12 w-full items-center justify-center pl-2 hover:bg-[#4f545c] hover:bg-opacity-20"
|
||||
onClick={async () => {
|
||||
await handleLanguage(language)
|
||||
}}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import classNames from 'clsx'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useState } from "react"
|
||||
import classNames from "clsx"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
export const SwitchTheme: React.FC = () => {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
@ -15,61 +15,61 @@ export const SwitchTheme: React.FC = () => {
|
||||
}
|
||||
|
||||
const handleClick = (): void => {
|
||||
setTheme(theme === 'dark' ? 'light' : 'dark')
|
||||
setTheme(theme === "dark" ? "light" : "dark")
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className='flex items-center'
|
||||
data-cy='switch-theme-click'
|
||||
className="flex items-center"
|
||||
data-cy="switch-theme-click"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<div className='relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0'>
|
||||
<div className='h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out'>
|
||||
<div className="relative inline-block cursor-pointer touch-pan-x select-none border-0 bg-transparent p-0">
|
||||
<div className="h-[24px] w-[50px] rounded-[30px] bg-[#4d4d4d] p-0 text-white transition-all duration-200 ease-in-out">
|
||||
<div
|
||||
data-cy='switch-theme-dark'
|
||||
data-cy="switch-theme-dark"
|
||||
className={classNames(
|
||||
'absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out',
|
||||
"absolute top-0 bottom-0 left-[8px] mt-auto mb-auto h-[10px] w-[14px] leading-[0] transition-opacity duration-[250ms] ease-in-out",
|
||||
{
|
||||
'opacity-100': theme === 'dark',
|
||||
'opacity-0': theme === 'light'
|
||||
}
|
||||
"opacity-100": theme === "dark",
|
||||
"opacity-0": theme === "light",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||
<span className="relative flex h-[10px] w-[10px] items-center justify-center">
|
||||
🌜
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
data-cy='switch-theme-light'
|
||||
data-cy="switch-theme-light"
|
||||
className={classNames(
|
||||
'absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]',
|
||||
"absolute right-[10px] top-0 bottom-0 mt-auto mb-auto h-[10px] w-[10px] leading-[0]",
|
||||
{
|
||||
'opacity-100': theme === 'light',
|
||||
'opacity-0': theme === 'dark'
|
||||
}
|
||||
"opacity-100": theme === "light",
|
||||
"opacity-0": theme === "dark",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className='relative flex h-[10px] w-[10px] items-center justify-center'>
|
||||
<span className="relative flex h-[10px] w-[10px] items-center justify-center">
|
||||
🌞
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out',
|
||||
"absolute top-[1px] box-border h-[22px] w-[22px] rounded-[50%] bg-[#fafafa] text-white transition-all duration-[250ms] ease-in-out",
|
||||
{
|
||||
'left-[27px]': theme === 'dark',
|
||||
'left-0': theme === 'light'
|
||||
}
|
||||
"left-[27px]": theme === "dark",
|
||||
"left-0": theme === "light",
|
||||
},
|
||||
)}
|
||||
style={{ border: '1px solid #4d4d4d' }}
|
||||
style={{ border: "1px solid #4d4d4d" }}
|
||||
/>
|
||||
<input
|
||||
data-cy='switch-theme-input'
|
||||
type='checkbox'
|
||||
aria-label='Dark mode toggle'
|
||||
className='absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0'
|
||||
data-cy="switch-theme-input"
|
||||
type="checkbox"
|
||||
aria-label="Dark mode toggle"
|
||||
className="absolute m-[-1px] h-[1px] w-[1px] overflow-hidden border-0 p-0"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Header'
|
||||
export * from "./Header"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import classNames from 'clsx'
|
||||
import classNames from "clsx"
|
||||
|
||||
export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {}
|
||||
export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {}
|
||||
|
||||
export const Button: React.FC<ButtonProps> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
@ -8,8 +8,8 @@ export const Button: React.FC<ButtonProps> = (props) => {
|
||||
return (
|
||||
<button
|
||||
className={classNames(
|
||||
'py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400',
|
||||
className
|
||||
"py-2 px-6 font-paragraph rounded-lg bg-transparent border hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black border-green-800 dark:border-green-400 text-green-800 dark:text-green-400 hover:bg-green-800 focus:bg-green-800 dark:focus:bg-green-400 dark:hover:bg-green-400",
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import classNames from 'clsx'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import type { FetchState as FormStateType } from 'react-component-form'
|
||||
import classNames from "clsx"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import type { FetchState as FormStateType } from "react-component-form"
|
||||
|
||||
import { Loader } from './Loader'
|
||||
import { Loader } from "./Loader"
|
||||
|
||||
export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {
|
||||
export interface FormStateProps extends React.ComponentPropsWithoutRef<"div"> {
|
||||
state: FormStateType
|
||||
message?: string
|
||||
id?: string
|
||||
@ -14,15 +14,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
|
||||
const { state, message, id, ...rest } = props
|
||||
const { t } = useTranslation()
|
||||
|
||||
if (state === 'loading') {
|
||||
if (state === "loading") {
|
||||
return (
|
||||
<div data-cy='loader' className='mt-8 flex justify-center'>
|
||||
<div data-cy="loader" className="mt-8 flex justify-center">
|
||||
<Loader />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state === 'idle' || message == null) {
|
||||
if (state === "idle" || message == null) {
|
||||
return null
|
||||
}
|
||||
|
||||
@ -32,15 +32,15 @@ export const FormState: React.FC<FormStateProps> = (props) => {
|
||||
{...rest}
|
||||
className={classNames(
|
||||
props.className,
|
||||
'mt-6 flex max-w-xl items-center text-center font-medium',
|
||||
"mt-6 flex max-w-xl items-center text-center font-medium",
|
||||
{
|
||||
'text-red-800 dark:text-red-400': state === 'error',
|
||||
'text-green-800 dark:text-green-400': state === 'success'
|
||||
}
|
||||
"text-red-800 dark:text-red-400": state === "error",
|
||||
"text-green-800 dark:text-green-400": state === "success",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div className='inline bg-cover font-headline' />
|
||||
<span id={id} className='pl-2'>
|
||||
<div className="inline bg-cover font-headline" />
|
||||
<span id={id} className="pl-2">
|
||||
<b>{t(`common:${state}`)}:</b> {message}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import classNames from 'clsx'
|
||||
import classNames from "clsx"
|
||||
|
||||
import { FormState } from './FormState'
|
||||
import { FormState } from "./FormState"
|
||||
|
||||
export interface InputProps extends React.ComponentPropsWithRef<'input'> {
|
||||
export interface InputProps extends React.ComponentPropsWithRef<"input"> {
|
||||
label: string
|
||||
error?: string
|
||||
className?: string
|
||||
@ -12,23 +12,23 @@ export const Input: React.FC<InputProps> = (props) => {
|
||||
const { label, name, className, error, ...rest } = props
|
||||
|
||||
return (
|
||||
<div className='flex flex-col'>
|
||||
<div className={classNames('mt-6 mb-2 flex justify-between', className)}>
|
||||
<label className='pl-1' htmlFor={name}>
|
||||
<div className="flex flex-col">
|
||||
<div className={classNames("mt-6 mb-2 flex justify-between", className)}>
|
||||
<label className="pl-1" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
<div className='relative mt-0'>
|
||||
<div className="relative mt-0">
|
||||
<input
|
||||
className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
|
||||
className="h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none"
|
||||
{...rest}
|
||||
id={name}
|
||||
name={name}
|
||||
data-cy={`input-${name ?? 'name'}`}
|
||||
data-cy={`input-${name ?? "name"}`}
|
||||
/>
|
||||
<FormState
|
||||
id={`error-${name ?? 'input'}`}
|
||||
state={error == null ? 'idle' : 'error'}
|
||||
id={`error-${name ?? "input"}`}
|
||||
state={error == null ? "idle" : "error"}
|
||||
message={error}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import classNames from 'clsx'
|
||||
import classNames from "clsx"
|
||||
|
||||
export interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {}
|
||||
export interface LinkProps extends React.ComponentPropsWithoutRef<"a"> {}
|
||||
|
||||
export const Link: React.FC<LinkProps> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
@ -8,8 +8,8 @@ export const Link: React.FC<LinkProps> = (props) => {
|
||||
return (
|
||||
<a
|
||||
className={classNames(
|
||||
'text-green-800 hover:underline dark:text-green-400',
|
||||
className
|
||||
"text-green-800 hover:underline dark:text-green-400",
|
||||
className,
|
||||
)}
|
||||
{...rest}
|
||||
>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import styles from './Loader.module.css'
|
||||
import styles from "./Loader.module.css"
|
||||
|
||||
export interface LoaderProps {
|
||||
width?: number
|
||||
@ -12,19 +12,19 @@ export const Loader: React.FC<LoaderProps> = (props) => {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div
|
||||
data-cy='progress-spinner'
|
||||
className='relative my-0 mx-auto before:content-none before:block before:pt-[100%]'
|
||||
data-cy="progress-spinner"
|
||||
className="relative my-0 mx-auto before:content-none before:block before:pt-[100%]"
|
||||
style={{ width: `${width}px`, height: `${height}px` }}
|
||||
>
|
||||
<svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
|
||||
<svg className={styles["progressSpinnerSvg"]} viewBox="25 25 50 50">
|
||||
<circle
|
||||
className={styles['progressSpinnerCircle']}
|
||||
cx='50'
|
||||
cy='50'
|
||||
r='20'
|
||||
fill='none'
|
||||
strokeWidth='2'
|
||||
strokeMiterlimit='10'
|
||||
className={styles["progressSpinnerCircle"]}
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="20"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './Loader'
|
||||
export * from "./Loader"
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import classNames from 'clsx'
|
||||
import classNames from "clsx"
|
||||
|
||||
export interface TextSpecialProps
|
||||
extends React.ComponentPropsWithoutRef<'span'> {}
|
||||
extends React.ComponentPropsWithoutRef<"span"> {}
|
||||
|
||||
export const TextSpecial: React.FC<TextSpecialProps> = (props) => {
|
||||
const { children, className, ...rest } = props
|
||||
|
||||
return (
|
||||
<span
|
||||
className={classNames('text-green-800 dark:text-green-400', className)}
|
||||
className={classNames("text-green-800 dark:text-green-400", className)}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user