mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
chore: refactor frontend components folder
This commit is contained in:
swve
parent
46f016f661
commit
5a746a946d
106 changed files with 159 additions and 164 deletions
|
|
@ -0,0 +1,12 @@
|
|||
'use client'
|
||||
|
||||
function NewCollectionButton() {
|
||||
return (
|
||||
<button className="rounded-lg bg-black hover:scale-105 transition-all duration-100 ease-linear antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-xs font-bold text-white drop-shadow-lg flex space-x-2 items-center">
|
||||
<div>New Collection </div>
|
||||
<div className="text-md bg-neutral-800 px-1 rounded-full">+</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewCollectionButton
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
'use client'
|
||||
|
||||
function NewCourseButton() {
|
||||
return (
|
||||
<button className="rounded-lg bg-black hover:scale-105 transition-all duration-100 ease-linear antialiased ring-offset-purple-800 p-2 px-5 my-auto font text-xs font-bold text-white drop-shadow-lg flex space-x-2 items-center">
|
||||
<div>New Course </div>
|
||||
<div className="text-md bg-neutral-800 px-1 rounded-full">+</div>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default NewCourseButton
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
'use client'
|
||||
import React from 'react'
|
||||
import * as Dialog from '@radix-ui/react-dialog'
|
||||
import { styled, keyframes } from '@stitches/react'
|
||||
import { blackA } from '@radix-ui/colors'
|
||||
import { AlertTriangle, Info } from 'lucide-react'
|
||||
|
||||
type ModalParams = {
|
||||
confirmationMessage: string
|
||||
confirmationButtonText: string
|
||||
dialogTitle: string
|
||||
functionToExecute: any
|
||||
dialogTrigger?: React.ReactNode
|
||||
status?: 'warning' | 'info'
|
||||
buttonid?: string
|
||||
}
|
||||
|
||||
const ConfirmationModal = (params: ModalParams) => {
|
||||
const [isDialogOpen, setIsDialogOpen] = React.useState(false)
|
||||
const warningColors = 'bg-red-100 text-red-600'
|
||||
const infoColors = 'bg-blue-100 text-blue-600'
|
||||
const warningButtonColors = 'text-white bg-red-500 hover:bg-red-600'
|
||||
const infoButtonColors = 'text-white bg-blue-500 hover:bg-blue-600'
|
||||
|
||||
const onOpenChange = React.useCallback(
|
||||
(open: any) => {
|
||||
setIsDialogOpen(open)
|
||||
},
|
||||
[setIsDialogOpen]
|
||||
)
|
||||
|
||||
return (
|
||||
<Dialog.Root open={isDialogOpen} onOpenChange={onOpenChange}>
|
||||
{params.dialogTrigger ? (
|
||||
<Dialog.Trigger asChild>{params.dialogTrigger}</Dialog.Trigger>
|
||||
) : null}
|
||||
|
||||
<Dialog.Portal>
|
||||
<DialogOverlay />
|
||||
<DialogContent>
|
||||
<div className="h-26 flex space-x-4 tracking-tight">
|
||||
<div
|
||||
className={`icon p-6 rounded-xl flex items-center align-content-center ${
|
||||
params.status === 'warning' ? warningColors : infoColors
|
||||
}`}
|
||||
>
|
||||
{params.status === 'warning' ? (
|
||||
<AlertTriangle size={35} />
|
||||
) : (
|
||||
<Info size={35} />
|
||||
)}
|
||||
</div>
|
||||
<div className="text pt-1 space-x-0 w-auto flex-grow">
|
||||
<div className="text-xl font-bold text-black ">
|
||||
{params.dialogTitle}
|
||||
</div>
|
||||
<div className="text-md text-gray-500 w-60 leading-tight">
|
||||
{params.confirmationMessage}
|
||||
</div>
|
||||
<div className="flex flex-row-reverse pt-2">
|
||||
<div
|
||||
id={params.buttonid}
|
||||
className={`rounded-md text-sm px-3 py-2 font-bold flex justify-center items-center hover:cursor-pointer ${
|
||||
params.status === 'warning'
|
||||
? warningButtonColors
|
||||
: infoButtonColors
|
||||
}
|
||||
hover:shadow-lg transition duration-300 ease-in-out
|
||||
`}
|
||||
onClick={() => {
|
||||
params.functionToExecute()
|
||||
setIsDialogOpen(false)
|
||||
}}
|
||||
>
|
||||
{params.confirmationButtonText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
)
|
||||
}
|
||||
|
||||
const overlayShow = keyframes({
|
||||
'0%': { opacity: 0 },
|
||||
'100%': { opacity: 1 },
|
||||
})
|
||||
|
||||
const overlayClose = keyframes({
|
||||
'0%': { opacity: 1 },
|
||||
'100%': { opacity: 0 },
|
||||
})
|
||||
|
||||
const contentShow = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translate(-50%, -50%) scale(.96)' },
|
||||
'100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
||||
})
|
||||
|
||||
const contentClose = keyframes({
|
||||
'0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
|
||||
'100%': { opacity: 0, transform: 'translate(-50%, -52%) scale(.96)' },
|
||||
})
|
||||
|
||||
const DialogOverlay = styled(Dialog.Overlay, {
|
||||
backgroundColor: blackA.blackA9,
|
||||
position: 'fixed',
|
||||
zIndex: 500,
|
||||
inset: 0,
|
||||
animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
'&[data-state="closed"]': {
|
||||
animation: `${overlayClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
},
|
||||
})
|
||||
|
||||
const DialogContent = styled(Dialog.Content, {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 18,
|
||||
zIndex: 501,
|
||||
boxShadow:
|
||||
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: 'auto',
|
||||
minWidth: '500px',
|
||||
overflow: 'hidden',
|
||||
height: 'auto',
|
||||
maxHeight: '85vh',
|
||||
maxWidth: '600px',
|
||||
padding: 11,
|
||||
animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
'&:focus': { outline: 'none' },
|
||||
|
||||
'&[data-state="closed"]': {
|
||||
animation: `${contentClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||
},
|
||||
transition: 'max-height 0.3s ease-out',
|
||||
})
|
||||
|
||||
export default ConfirmationModal
|
||||
45
apps/web/components/Objects/StyledElements/Error/Error.tsx
Normal file
45
apps/web/components/Objects/StyledElements/Error/Error.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
'use client'
|
||||
import { getUriWithoutOrg } from '@services/config/config'
|
||||
import { AlertTriangle, HomeIcon, RefreshCcw } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import React from 'react'
|
||||
|
||||
function ErrorUI(params: { message?: string, submessage?: string }) {
|
||||
const router = useRouter()
|
||||
|
||||
function reloadPage() {
|
||||
router.refresh()
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
|
||||
<div className="flex flex-row items-center space-x-5 rounded-xl ">
|
||||
<AlertTriangle className="text-rose-700" size={45} />
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-3xl font-bold text-rose-700">{params.message ? params.message : 'Something went wrong'}</p>
|
||||
<p className="text-lg font-bold text-rose-700">{params.submessage ? params.submessage : ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex space-x-4'>
|
||||
<button
|
||||
onClick={() => reloadPage()}
|
||||
className="flex space-x-2 items-center rounded-full px-4 py-1 text-rose-200 bg-rose-700 hover:bg-rose-800 transition-all ease-linear shadow-lg "
|
||||
>
|
||||
<RefreshCcw className="text-rose-200" size={17} />
|
||||
<span className="text-md font-bold">Retry</span>
|
||||
</button>
|
||||
<Link
|
||||
href={getUriWithoutOrg('/home')}
|
||||
className="flex space-x-2 items-center rounded-full px-4 py-1 text-gray-200 bg-gray-700 hover:bg-gray-800 transition-all ease-linear shadow-lg "
|
||||
>
|
||||
<HomeIcon className="text-gray-200" size={17} />
|
||||
<span className="text-md font-bold">Home</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ErrorUI
|
||||
109
apps/web/components/Objects/StyledElements/Form/Form.tsx
Normal file
109
apps/web/components/Objects/StyledElements/Form/Form.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import React from 'react'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import { styled } from '@stitches/react'
|
||||
import { blackA } from '@radix-ui/colors'
|
||||
import { Info } from 'lucide-react'
|
||||
|
||||
const FormLayout = (props: any, onSubmit: any) => (
|
||||
<FormRoot className="h-fit" onSubmit={props.onSubmit}>
|
||||
{props.children}
|
||||
</FormRoot>
|
||||
)
|
||||
|
||||
export const FormLabelAndMessage = (props: {
|
||||
label: string
|
||||
message?: string
|
||||
}) => (
|
||||
<div className="flex items-center space-x-3">
|
||||
<FormLabel className="grow text-sm">{props.label}</FormLabel>
|
||||
{(props.message && (
|
||||
<div className="text-red-700 text-sm items-center rounded-md flex space-x-1">
|
||||
<Info size={10} />
|
||||
<div>{props.message}</div>
|
||||
</div>
|
||||
)) || <></>}
|
||||
</div>
|
||||
)
|
||||
|
||||
export const FormRoot = styled(Form.Root, {
|
||||
margin: 7,
|
||||
})
|
||||
|
||||
export const FormField = styled(Form.Field, {
|
||||
display: 'grid',
|
||||
marginBottom: 10,
|
||||
})
|
||||
|
||||
export const FormLabel = styled(Form.Label, {
|
||||
fontWeight: 500,
|
||||
lineHeight: '35px',
|
||||
color: 'black',
|
||||
})
|
||||
|
||||
export const FormMessage = styled(Form.Message, {
|
||||
fontSize: 13,
|
||||
color: 'white',
|
||||
opacity: 0.8,
|
||||
})
|
||||
|
||||
export const Flex = styled('div', { display: 'flex' })
|
||||
|
||||
export const inputStyles = {
|
||||
all: 'unset',
|
||||
boxSizing: 'border-box',
|
||||
width: '100%',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 4,
|
||||
fontSize: 15,
|
||||
color: '#7c7c7c',
|
||||
background: '#fbfdff',
|
||||
boxShadow: `0 0 0 1px #edeeef`,
|
||||
'&:hover': { boxShadow: `0 0 0 1px #edeeef` },
|
||||
'&:focus': { boxShadow: `0 0 0 2px #edeeef` },
|
||||
'&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
|
||||
}
|
||||
|
||||
export const Input = styled('input', {
|
||||
...inputStyles,
|
||||
height: 35,
|
||||
lineHeight: 1,
|
||||
padding: '0 10px',
|
||||
border: 'none',
|
||||
})
|
||||
|
||||
export const Textarea = styled('textarea', {
|
||||
...inputStyles,
|
||||
resize: 'none',
|
||||
padding: 10,
|
||||
})
|
||||
|
||||
export const ButtonBlack = styled('button', {
|
||||
variants: {
|
||||
state: {
|
||||
loading: {
|
||||
pointerEvents: 'none',
|
||||
backgroundColor: '#808080',
|
||||
},
|
||||
none: {},
|
||||
},
|
||||
},
|
||||
all: 'unset',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 8,
|
||||
padding: '0 15px',
|
||||
fontSize: 15,
|
||||
lineHeight: 1,
|
||||
fontWeight: 500,
|
||||
height: 35,
|
||||
|
||||
background: '#000000',
|
||||
color: '#FFFFFF',
|
||||
'&:hover': { backgroundColor: '#181818', cursor: 'pointer' },
|
||||
'&:focus': { boxShadow: `0 0 0 2px black` },
|
||||
})
|
||||
|
||||
export default FormLayout
|
||||
37
apps/web/components/Objects/StyledElements/Info/Info.tsx
Normal file
37
apps/web/components/Objects/StyledElements/Info/Info.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
'use client'
|
||||
import { getUriWithoutOrg } from '@services/config/config'
|
||||
import { Diamond, Home, PersonStanding } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
function InfoUI(params: { message?: string, submessage?: string, cta?: string, href: string }) {
|
||||
return (
|
||||
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-yellow-100 to-yellow-100/5 ">
|
||||
<div className="flex flex-row items-center space-x-5 rounded-xl ">
|
||||
<Diamond className="text-yellow-700" size={45} />
|
||||
<div className='flex flex-col'>
|
||||
<p className="text-3xl font-bold text-yellow-700">{params.message ? params.message : 'Something went wrong'}</p>
|
||||
<p className="text-lg font-bold text-yellow-700">{params.submessage ? params.submessage : ''}</p>
|
||||
</div>
|
||||
</div>
|
||||
{params.cta && <div className='flex space-x-4'>
|
||||
<Link
|
||||
href={params.href}
|
||||
className="flex space-x-2 items-center rounded-full px-4 py-1 text-yellow-200 bg-yellow-700 hover:bg-yellow-800 transition-all ease-linear shadow-lg "
|
||||
>
|
||||
<PersonStanding className="text-yellow-200" size={17} />
|
||||
<span className="text-md font-bold">{params.cta}</span>
|
||||
</Link>
|
||||
<Link
|
||||
href={getUriWithoutOrg('/home')}
|
||||
className="flex space-x-2 items-center rounded-full px-4 py-1 text-gray-200 bg-gray-700 hover:bg-gray-800 transition-all ease-linear shadow-lg "
|
||||
>
|
||||
<Home className="text-gray-200" size={17} />
|
||||
<span className="text-md font-bold">Home</span>
|
||||
</Link>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default InfoUI
|
||||
80
apps/web/components/Objects/StyledElements/Modal/Modal.tsx
Normal file
80
apps/web/components/Objects/StyledElements/Modal/Modal.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@components/Ui/dialog"
|
||||
import { ButtonBlack } from '../Form/Form'
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type ModalParams = {
|
||||
dialogTitle?: string
|
||||
dialogDescription?: string
|
||||
dialogContent: React.ReactNode
|
||||
dialogClose?: React.ReactNode | null
|
||||
dialogTrigger?: React.ReactNode
|
||||
addDefCloseButton?: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
isDialogOpen?: boolean
|
||||
minHeight?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
|
||||
minWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'no-min'
|
||||
customHeight?: string
|
||||
customWidth?: string
|
||||
}
|
||||
|
||||
const Modal = (params: ModalParams) => {
|
||||
const getMinHeight = () => {
|
||||
switch (params.minHeight) {
|
||||
case 'sm': return 'min-h-[300px]'
|
||||
case 'md': return 'min-h-[500px]'
|
||||
case 'lg': return 'min-h-[700px]'
|
||||
case 'xl': return 'min-h-[900px]'
|
||||
default: return ''
|
||||
}
|
||||
}
|
||||
|
||||
const getMinWidth = () => {
|
||||
switch (params.minWidth) {
|
||||
case 'sm': return 'min-w-[600px]'
|
||||
case 'md': return 'min-w-[800px]'
|
||||
case 'lg': return 'min-w-[1000px]'
|
||||
case 'xl': return 'min-w-[1200px]'
|
||||
default: return ''
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={params.isDialogOpen} onOpenChange={params.onOpenChange}>
|
||||
{params.dialogTrigger && (
|
||||
<DialogTrigger asChild>{params.dialogTrigger}</DialogTrigger>
|
||||
)}
|
||||
<DialogContent className={cn(
|
||||
"overflow-auto",
|
||||
getMinHeight(),
|
||||
getMinWidth(),
|
||||
params.customHeight,
|
||||
params.customWidth
|
||||
)}>
|
||||
{params.dialogTitle && params.dialogDescription && (
|
||||
<DialogHeader className="text-center flex flex-col space-y-0.5 w-full">
|
||||
<DialogTitle>{params.dialogTitle}</DialogTitle>
|
||||
<DialogDescription>{params.dialogDescription}</DialogDescription>
|
||||
</DialogHeader>
|
||||
)}
|
||||
<div className="overflow-auto">
|
||||
{params.dialogContent}
|
||||
</div>
|
||||
{(params.dialogClose || params.addDefCloseButton) && (
|
||||
<DialogFooter>
|
||||
{params.dialogClose}
|
||||
{params.addDefCloseButton && (
|
||||
<ButtonBlack type="submit">
|
||||
Close
|
||||
</ButtonBlack>
|
||||
)}
|
||||
</DialogFooter>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default Modal
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import Image from 'next/image'
|
||||
import CoursesLogo from 'public/svg/courses.svg'
|
||||
import CollectionsLogo from 'public/svg/collections.svg'
|
||||
import TrailLogo from 'public/svg/trail.svg'
|
||||
|
||||
function TypeOfContentTitle(props: { title: string; type: string }) {
|
||||
function getLogo() {
|
||||
if (props.type == 'col') {
|
||||
return CollectionsLogo
|
||||
} else if (props.type == 'cou') {
|
||||
return CoursesLogo
|
||||
} else if (props.type == 'tra') {
|
||||
return TrailLogo
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="home_category_title flex my-5 items-center">
|
||||
<div className="ml-2 rounded-full ring-1 ring-slate-900/5 shadow-inner p-2 my-auto mr-4">
|
||||
<Image unoptimized className="" src={getLogo()} alt="Courses logo" />
|
||||
</div>
|
||||
<h1 className="font-bold text-2xl">{props.title}</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TypeOfContentTitle
|
||||
13
apps/web/components/Objects/StyledElements/Toast/Toast.tsx
Normal file
13
apps/web/components/Objects/StyledElements/Toast/Toast.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
'use client'
|
||||
import React from 'react'
|
||||
import { Toaster } from 'react-hot-toast'
|
||||
|
||||
function Toast() {
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Toast
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
'use client'
|
||||
import React from 'react'
|
||||
import * as Tooltip from '@radix-ui/react-tooltip'
|
||||
import { styled, keyframes } from '@stitches/react'
|
||||
|
||||
type TooltipProps = {
|
||||
sideOffset?: number
|
||||
content: React.ReactNode
|
||||
children: React.ReactNode
|
||||
side?: 'top' | 'right' | 'bottom' | 'left' // default is bottom
|
||||
slateBlack?: boolean
|
||||
}
|
||||
|
||||
const ToolTip = (props: TooltipProps) => {
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>{props.children}</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<TooltipContent
|
||||
slateBlack={props.slateBlack}
|
||||
side={props.side ? props.side : 'bottom'}
|
||||
sideOffset={props.sideOffset}
|
||||
>
|
||||
{props.content}
|
||||
</TooltipContent>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const slideUpAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateY(2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateY(0)' },
|
||||
})
|
||||
|
||||
const slideRightAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateX(-2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateX(0)' },
|
||||
})
|
||||
|
||||
const slideDownAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateY(-2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateY(0)' },
|
||||
})
|
||||
|
||||
const slideLeftAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateX(2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateX(0)' },
|
||||
})
|
||||
|
||||
const closeAndFade = keyframes({
|
||||
'0%': { opacity: 1 },
|
||||
'100%': { opacity: 0 },
|
||||
})
|
||||
|
||||
const TooltipContent = styled(Tooltip.Content, {
|
||||
variants: {
|
||||
slateBlack: {
|
||||
true: {
|
||||
backgroundColor: ' #0d0d0d',
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
borderRadius: 4,
|
||||
padding: '5px 10px',
|
||||
fontSize: 12,
|
||||
lineHeight: 1,
|
||||
color: 'black',
|
||||
backgroundColor: 'rgba(217, 217, 217, 0.50)',
|
||||
zIndex: 500,
|
||||
boxShadow:
|
||||
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||
userSelect: 'none',
|
||||
animationDuration: '400ms',
|
||||
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
willChange: 'transform, opacity',
|
||||
'&[data-state="delayed-open"]': {
|
||||
'&[data-side="top"]': { animationName: slideDownAndFade },
|
||||
'&[data-side="right"]': { animationName: slideLeftAndFade },
|
||||
'&[data-side="bottom"]': { animationName: slideUpAndFade },
|
||||
'&[data-side="left"]': { animationName: slideRightAndFade },
|
||||
},
|
||||
|
||||
// closing animation
|
||||
'&[data-state="closed"]': {
|
||||
'&[data-side="top"]': { animationName: closeAndFade },
|
||||
'&[data-side="right"]': { animationName: closeAndFade },
|
||||
'&[data-side="bottom"]': { animationName: closeAndFade },
|
||||
'&[data-side="left"]': { animationName: closeAndFade },
|
||||
},
|
||||
})
|
||||
|
||||
export default ToolTip
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
function GeneralWrapperStyled({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 py-5 tracking-tight z-50">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralWrapperStyled
|
||||
Loading…
Add table
Add a link
Reference in a new issue