Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 08:42:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: updated initial animation state

Browse Source 
Signed-off-by: Adithya Krishna <adithya@documenso.com>
This commit is contained in:
Adithya Krishna
2024-03-07 19:28:35 +05:30
parent 9ae51a0072
commit 0c426983bb
2 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/lib/document-dropzone-constants.ts
View File

@ -68,7 +68,7 @@ export const DocumentDropzoneCardCenterVariants: Variants = {
export const DocumentDropzoneDisabledCardLeftVariants: Variants = { export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
initial: { initial: {
x: 40, x: 40,
y: 30, y: 0,
rotate: -14, rotate: -14,
}, },
animate: { animate: {
@ -85,8 +85,8 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
export const DocumentDropzoneDisabledCardRightVariants: Variants = { export const DocumentDropzoneDisabledCardRightVariants: Variants = {
initial: { initial: {
x: -40, x: -50,
y: 30, y: 5,
rotate: 14, rotate: 14,
}, },
animate: { animate: {
@ -103,7 +103,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = {
export const DocumentDropzoneDisabledCardCenterVariants: Variants = { export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
initial: { initial: {
x: 20, x: -10,
y: 0, y: 0,
}, },
animate: { animate: {

19
packages/ui/primitives/document-dropzone.tsx
View File

@ -69,17 +69,10 @@ export const DocumentDropzone = ({
}); });
return ( return (
<motion.div
className={cn('flex', className)}
variants={DocumentDropzoneContainerVariants}
initial="initial"
animate="animate"
whileHover="hover"
>
<Card <Card
role="button" role="button"
className={cn( className={cn(
'focus-visible:ring-ring ring-offset-background flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'focus-visible:ring-ring ring-offset-background flex flex flex-1 cursor-pointer flex-col items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
className, className,
)} )}
gradient={!disabled} gradient={!disabled}
@ -89,6 +82,12 @@ export const DocumentDropzone = ({
{...props} {...props}
> >
<CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6"> <CardContent className="text-muted-foreground/40 flex flex-col items-center justify-center p-6">
<motion.div
variants={DocumentDropzoneContainerVariants}
initial="initial"
animate="animate"
whileHover="hover"
>
{disabled ? ( {disabled ? (
// Disabled State // Disabled State
<div className="flex"> <div className="flex">
@ -152,12 +151,13 @@ export const DocumentDropzone = ({
</motion.div> </motion.div>
</div> </div>
)} )}
</motion.div>
<input {...getInputProps()} /> <input {...getInputProps()} />
<p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p> <p className="text-foreground mt-8 font-medium">{DocumentDescription[type].headline}</p>
<p className="text-muted-foreground/80 mt-1 text-sm"> <p className="text-muted-foreground/80 mt-1 text-center text-sm">
{disabled ? disabledMessage : 'Drag & drop your PDF here.'} {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
</p> </p>
{disabled && ( {disabled && (
@ -167,6 +167,5 @@ export const DocumentDropzone = ({
)} )}
</CardContent> </CardContent>
</Card> </Card>
</motion.div>
); );
}; };