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

fix: update singleplayer add signature to card

Browse Source
This commit is contained in:
Mythie
2023-10-22 12:40:09 +11:00
parent 1d604fff2c
commit 687ce66e41
10 changed files with 112 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/ui/components/signing-card.tsx
View File

@ -5,23 +5,31 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import Image, { StaticImageData } from 'next/image';
import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
import { P, match } from 'ts-pattern';
import { Signature } from '@documenso/prisma/client';
import { cn } from '@documenso/ui/lib/utils';
import { Card, CardContent } from '@documenso/ui/primitives/card';
export type SigningCardProps = {
className?: string;
name: string;
signature?: Signature;
signingCelebrationImage?: StaticImageData;
};
/**
* 2D signing card.
*/
export const SigningCard = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
export const SigningCard = ({
className,
name,
signature,
signingCelebrationImage,
}: SigningCardProps) => {
return (
<div className={cn('relative w-full max-w-xs md:max-w-sm', className)}>
<SigningCardContent name={name} />
<SigningCardContent name={name} signature={signature} />
{signingCelebrationImage && (
<SigningCardImage signingCelebrationImage={signingCelebrationImage} />
@ -33,7 +41,12 @@ export const SigningCard = ({ className, name, signingCelebrationImage }: Signin
/**
* 3D signing card that follows the mouse movement within a certain range.
*/
export const SigningCard3D = ({ className, name, signingCelebrationImage }: SigningCardProps) => {
export const SigningCard3D = ({
className,
name,
signature,
signingCelebrationImage,
}: SigningCardProps) => {
// Should use % based dimensions by calculating the window height/width.
const boundary = 400;
@ -130,7 +143,7 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
rotateY,
}}
>
<SigningCardContent className="bg-transparent" name={name} />
<SigningCardContent className="bg-transparent" name={name} signature={signature} />
</motion.div>
{signingCelebrationImage && (
@ -142,10 +155,11 @@ export const SigningCard3D = ({ className, name, signingCelebrationImage }: Sign
type SigningCardContentProps = {
name: string;
signature?: Signature;
className?: string;
};
const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
const SigningCardContent = ({ className, name, signature }: SigningCardContentProps) => {
return (
<Card
className={cn(
@ -161,14 +175,36 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
container: 'main',
}}
>
<span
className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
style={{
fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
}}
>
{name}
</span>
{match(signature)
.with({ signatureImageAsBase64: P.string }, (signature) => (
<img
src={signature.signatureImageAsBase64}
alt="signature"
className="h-full max-w-[100%] dark:invert"
/>
))
.with({ typedSignature: P.string }, (signature) => (
<span
className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
style={{
fontSize: `max(min(4rem, ${(100 / signature.typedSignature.length / 2).toFixed(
4,
)}cqw), 1.875rem)`,
}}
>
{signature.typedSignature}
</span>
))
.otherwise(() => (
<span
className="text-muted-foreground/60 group-hover:text-primary/80 break-all font-semibold duration-300"
style={{
fontSize: `max(min(4rem, ${(100 / name.length / 2).toFixed(4)}cqw), 1.875rem)`,
}}
>
{name}
</span>
))}
</CardContent>
</Card>
);