Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +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 = {
initial: {
x: 40,
y: 30,
y: 0,
rotate: -14,
},
animate: {
@ -85,8 +85,8 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = {
export const DocumentDropzoneDisabledCardRightVariants: Variants = {
initial: {
x: -40,
y: 30,
x: -50,
y: 5,
rotate: 14,
},
animate: {
@ -103,7 +103,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = {
export const DocumentDropzoneDisabledCardCenterVariants: Variants = {
initial: {
x: 20,
x: -10,
y: 0,
},
animate: {

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

@ -69,17 +69,10 @@ export const DocumentDropzone = ({
});
return (
<motion.div
className={cn('flex', className)}
variants={DocumentDropzoneContainerVariants}
initial="initial"
animate="animate"
whileHover="hover"
>
<Card
role="button"
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,
)}
gradient={!disabled}
@ -89,6 +82,12 @@ export const DocumentDropzone = ({
{...props}
>
<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 State
<div className="flex">
@ -152,12 +151,13 @@ export const DocumentDropzone = ({
</motion.div>
</div>
)}
</motion.div>
<input {...getInputProps()} />
<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.'}
</p>
{disabled && (
@ -167,6 +167,5 @@ export const DocumentDropzone = ({
)}
</CardContent>
</Card>
</motion.div>
);
};