mirror of
https://github.com/ramvignesh-b/pi-ku.git
synced 2026-05-04 15:56:56 +00:00
refactor: reorganize directory structure by moving UI components into feature-specific folders
This commit is contained in:
ramvignesh-b
@@ -1,503 +0,0 @@
|
||||
import * as fabric from "fabric";
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react";
|
||||
|
||||
const PAD = 36;
|
||||
const BASE_WIDTH = 680;
|
||||
const DEFAULT_LOGICAL_HEIGHT = 900;
|
||||
|
||||
export interface FabricObjectJSON {
|
||||
type: string;
|
||||
name?: string;
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
height: number;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface FabricImageJSON extends FabricObjectJSON {
|
||||
type: "Image";
|
||||
src: string;
|
||||
_customRawFile?: File;
|
||||
}
|
||||
|
||||
export interface CanvasJSON {
|
||||
objects: (FabricObjectJSON | FabricImageJSON)[];
|
||||
canvasWidth?: number;
|
||||
canvasHeight?: number;
|
||||
}
|
||||
|
||||
export type CanvasTools = {
|
||||
addImage: (url: string, file: File) => void;
|
||||
getData: () => CanvasJSON;
|
||||
getJsonData: () => string;
|
||||
getImages: () => { src: string; file: File }[];
|
||||
loadData: (data: CanvasJSON) => Promise<void>;
|
||||
};
|
||||
|
||||
export interface FabricImageWithFile extends fabric.FabricImage {
|
||||
_customRawFile: File;
|
||||
}
|
||||
|
||||
const waitForLayout = (wrapper: HTMLDivElement): Promise<number> => {
|
||||
return new Promise((resolve) => {
|
||||
const check = () => {
|
||||
const width = wrapper.clientWidth || 0;
|
||||
if (width > 0) resolve(width);
|
||||
else requestAnimationFrame(check);
|
||||
};
|
||||
check();
|
||||
});
|
||||
};
|
||||
|
||||
const createMainTextbox = (
|
||||
text: string,
|
||||
isReadOnly = false,
|
||||
): fabric.Textbox => {
|
||||
return new fabric.Textbox(text, {
|
||||
name: "main-textbox",
|
||||
originX: "left",
|
||||
originY: "top",
|
||||
left: PAD,
|
||||
top: PAD,
|
||||
width: BASE_WIDTH - PAD * 2,
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
fontFamily: "Playfair Display Variable",
|
||||
fill: "#000",
|
||||
lineHeight: 1.5,
|
||||
editable: !isReadOnly,
|
||||
selectable: false,
|
||||
evented: !isReadOnly,
|
||||
hasControls: false,
|
||||
hasBorders: false,
|
||||
objectCaching: false,
|
||||
splitByGrapheme: false,
|
||||
lockMovementX: true,
|
||||
lockMovementY: true,
|
||||
lockScalingX: true,
|
||||
lockScalingY: true,
|
||||
lockRotation: true,
|
||||
});
|
||||
};
|
||||
|
||||
const fixFabricA11y = () => {
|
||||
const textAreas = document.querySelectorAll(
|
||||
'textarea[data-fabric="textarea"]',
|
||||
);
|
||||
for (const area of textAreas) {
|
||||
if (!area.getAttribute("aria-label")) {
|
||||
area.setAttribute("aria-label", "Canvas text input");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initializeCanvas = (
|
||||
el: HTMLCanvasElement,
|
||||
width: number,
|
||||
height: number,
|
||||
readOnly: boolean,
|
||||
) => {
|
||||
const canvas = new fabric.Canvas(el, {
|
||||
width,
|
||||
height,
|
||||
selection: !readOnly,
|
||||
preserveObjectStacking: true,
|
||||
allowTouchScrolling: true,
|
||||
enableRetinaScaling: true,
|
||||
objectCaching: false,
|
||||
});
|
||||
|
||||
const wrapperEl = canvas.getElement().parentElement;
|
||||
if (wrapperEl) wrapperEl.style.background = "transparent";
|
||||
|
||||
return canvas;
|
||||
};
|
||||
|
||||
const getLogicalSize = (data: CanvasJSON | null) => {
|
||||
return {
|
||||
width: data?.canvasWidth ?? BASE_WIDTH,
|
||||
height: data?.canvasHeight ?? DEFAULT_LOGICAL_HEIGHT,
|
||||
};
|
||||
};
|
||||
|
||||
const getObjectBottom = (obj: fabric.FabricObject) => {
|
||||
const top = obj.top ?? 0;
|
||||
const height =
|
||||
typeof obj.getScaledHeight === "function"
|
||||
? obj.getScaledHeight()
|
||||
: (obj.height ?? 0) * (obj.scaleY ?? 1);
|
||||
|
||||
return top + height;
|
||||
};
|
||||
|
||||
const measureLogicalContentHeight = (
|
||||
canvas: fabric.Canvas,
|
||||
minimumHeight = DEFAULT_LOGICAL_HEIGHT,
|
||||
) => {
|
||||
const maxBottom = canvas
|
||||
.getObjects()
|
||||
.reduce((max, obj) => Math.max(max, getObjectBottom(obj)), 0);
|
||||
|
||||
return Math.max(minimumHeight, maxBottom + PAD);
|
||||
};
|
||||
|
||||
const applyResponsiveViewport = (
|
||||
canvas: fabric.Canvas,
|
||||
wrapper: HTMLDivElement,
|
||||
logicalWidth: number,
|
||||
logicalHeight: number,
|
||||
) => {
|
||||
const physicalWidth = wrapper.clientWidth || logicalWidth;
|
||||
const zoom = physicalWidth / logicalWidth;
|
||||
const physicalHeight = Math.max(1, logicalHeight * zoom);
|
||||
|
||||
canvas.setDimensions({
|
||||
width: physicalWidth,
|
||||
height: physicalHeight,
|
||||
});
|
||||
|
||||
wrapper.style.height = `${physicalHeight}px`;
|
||||
canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);
|
||||
canvas.requestRenderAll();
|
||||
};
|
||||
|
||||
const focusTextbox = (
|
||||
fCanvas: fabric.Canvas,
|
||||
textbox: fabric.Textbox,
|
||||
readOnly: boolean,
|
||||
) => {
|
||||
if (readOnly) return;
|
||||
|
||||
fCanvas.setActiveObject(textbox);
|
||||
textbox.enterEditing();
|
||||
|
||||
const end = textbox.text?.length ?? 0;
|
||||
textbox.selectionStart = end;
|
||||
textbox.selectionEnd = end;
|
||||
|
||||
fCanvas.requestRenderAll();
|
||||
fixFabricA11y();
|
||||
};
|
||||
|
||||
const findMainTextbox = (canvas: fabric.Canvas): fabric.Textbox | null => {
|
||||
const textbox = canvas.getObjects("Textbox")[0];
|
||||
|
||||
return (textbox as fabric.Textbox) ?? null;
|
||||
};
|
||||
|
||||
export const ComposeCanvas = forwardRef<
|
||||
CanvasTools,
|
||||
{ readOnly?: boolean; initialData?: CanvasJSON | null }
|
||||
>(({ readOnly = false, initialData = null }, ref) => {
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const fabricRef = useRef<fabric.Canvas | null>(null);
|
||||
const textboxRef = useRef<fabric.Textbox | null>(null);
|
||||
const deferredDataRef = useRef<CanvasJSON | null>(null);
|
||||
const logicalSizeRef = useRef({
|
||||
width: BASE_WIDTH,
|
||||
height: DEFAULT_LOGICAL_HEIGHT,
|
||||
});
|
||||
|
||||
const syncViewport = useCallback(() => {
|
||||
if (!(fabricRef.current && wrapperRef.current)) return;
|
||||
|
||||
applyResponsiveViewport(
|
||||
fabricRef.current,
|
||||
wrapperRef.current,
|
||||
logicalSizeRef.current.width,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
}, []);
|
||||
|
||||
const updateLogicalHeightFromContent = useCallback(() => {
|
||||
if (!fabricRef.current) return;
|
||||
|
||||
logicalSizeRef.current.height = measureLogicalContentHeight(
|
||||
fabricRef.current,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
|
||||
syncViewport();
|
||||
}, [syncViewport]);
|
||||
|
||||
const setupTextboxInteractions = useCallback(
|
||||
(fCanvas: fabric.Canvas, textbox: fabric.Textbox) => {
|
||||
textbox.on("changed", () => {
|
||||
updateLogicalHeightFromContent();
|
||||
});
|
||||
|
||||
fCanvas.on("mouse:down", (opt) => {
|
||||
if (!opt.target || opt.target === textbox) {
|
||||
focusTextbox(fCanvas, textbox, readOnly);
|
||||
}
|
||||
});
|
||||
|
||||
if (!readOnly) {
|
||||
setTimeout(() => {
|
||||
focusTextbox(fCanvas, textbox, readOnly);
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
[readOnly, updateLogicalHeightFromContent],
|
||||
);
|
||||
|
||||
const loadContent = useCallback(
|
||||
async (
|
||||
canvas: fabric.Canvas,
|
||||
data: CanvasJSON | null,
|
||||
wrapper: HTMLDivElement,
|
||||
): Promise<fabric.Textbox | null> => {
|
||||
const logicalSize = getLogicalSize(data);
|
||||
logicalSizeRef.current = logicalSize;
|
||||
|
||||
canvas.clear();
|
||||
|
||||
let textbox: fabric.Textbox | null = null;
|
||||
|
||||
if (data?.objects?.length) {
|
||||
await canvas.loadFromJSON(data);
|
||||
textbox = findMainTextbox(canvas);
|
||||
} else {
|
||||
textbox = createMainTextbox("Take a deep breath...", readOnly);
|
||||
canvas.add(textbox);
|
||||
}
|
||||
|
||||
if (!textbox) return null;
|
||||
|
||||
textbox.selectable = !readOnly;
|
||||
textbox.evented = !readOnly;
|
||||
textbox.editable = !readOnly;
|
||||
textbox.hasBorders = false;
|
||||
textbox.lockMovementX = true;
|
||||
textbox.lockMovementY = true;
|
||||
textbox.lockScalingX = true;
|
||||
textbox.lockScalingY = true;
|
||||
textbox.lockRotation = true;
|
||||
textbox.objectCaching = false;
|
||||
|
||||
logicalSizeRef.current.height = measureLogicalContentHeight(
|
||||
canvas,
|
||||
logicalSize.height,
|
||||
);
|
||||
|
||||
applyResponsiveViewport(
|
||||
canvas,
|
||||
wrapper,
|
||||
logicalSizeRef.current.width,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
|
||||
if (!(readOnly || data)) {
|
||||
focusTextbox(canvas, textbox, readOnly);
|
||||
}
|
||||
|
||||
return textbox;
|
||||
},
|
||||
[readOnly],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
let canvas: fabric.Canvas | null = null;
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
let lastWidth = 0;
|
||||
|
||||
const init = async () => {
|
||||
await document.fonts.ready;
|
||||
if (!(wrapperRef.current && canvasRef.current && isMounted)) return;
|
||||
|
||||
const finalWidth = await waitForLayout(wrapperRef.current);
|
||||
if (!(isMounted && canvasRef.current && wrapperRef.current)) return;
|
||||
|
||||
canvas = initializeCanvas(
|
||||
canvasRef.current,
|
||||
finalWidth,
|
||||
DEFAULT_LOGICAL_HEIGHT,
|
||||
readOnly,
|
||||
);
|
||||
|
||||
fabricRef.current = canvas;
|
||||
|
||||
const textbox = await loadContent(
|
||||
canvas,
|
||||
initialData,
|
||||
wrapperRef.current,
|
||||
);
|
||||
|
||||
if (textbox) {
|
||||
textboxRef.current = textbox;
|
||||
setupTextboxInteractions(canvas, textbox);
|
||||
}
|
||||
|
||||
canvas.requestRenderAll();
|
||||
fixFabricA11y();
|
||||
|
||||
lastWidth = wrapperRef.current.clientWidth;
|
||||
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
if (!(fabricRef.current && wrapperRef.current)) return;
|
||||
|
||||
const nextWidth = wrapperRef.current.clientWidth;
|
||||
if (!nextWidth || nextWidth === lastWidth) return;
|
||||
|
||||
lastWidth = nextWidth;
|
||||
syncViewport();
|
||||
});
|
||||
|
||||
resizeObserver.observe(wrapperRef.current);
|
||||
|
||||
if (deferredDataRef.current) {
|
||||
const data = deferredDataRef.current;
|
||||
deferredDataRef.current = null;
|
||||
|
||||
const textbox = await loadContent(canvas, data, wrapperRef.current);
|
||||
if (textbox) {
|
||||
textboxRef.current = textbox;
|
||||
setupTextboxInteractions(canvas, textbox);
|
||||
}
|
||||
|
||||
canvas.requestRenderAll();
|
||||
fixFabricA11y();
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
resizeObserver?.disconnect();
|
||||
canvas?.dispose();
|
||||
fabricRef.current = null;
|
||||
textboxRef.current = null;
|
||||
};
|
||||
}, [
|
||||
initialData,
|
||||
loadContent,
|
||||
readOnly,
|
||||
setupTextboxInteractions,
|
||||
syncViewport,
|
||||
]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
addImage: (url: string, file: File) => {
|
||||
if (!fabricRef.current) return;
|
||||
|
||||
fabric.FabricImage.fromURL(url).then((img) => {
|
||||
img.scaleToWidth(Math.min(300, img.width));
|
||||
img.set({
|
||||
originX: "left",
|
||||
originY: "top",
|
||||
_customRawFile: file,
|
||||
left: PAD,
|
||||
top: PAD,
|
||||
objectCaching: false,
|
||||
} as Partial<FabricImageWithFile>);
|
||||
|
||||
fabricRef.current?.add(img);
|
||||
fabricRef.current?.setActiveObject(img);
|
||||
|
||||
if (!fabricRef.current) return;
|
||||
|
||||
logicalSizeRef.current.height = measureLogicalContentHeight(
|
||||
fabricRef.current,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
|
||||
if (wrapperRef.current) {
|
||||
applyResponsiveViewport(
|
||||
fabricRef.current,
|
||||
wrapperRef.current,
|
||||
logicalSizeRef.current.width,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
} else {
|
||||
fabricRef.current?.requestRenderAll();
|
||||
}
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
});
|
||||
},
|
||||
|
||||
getData: () => {
|
||||
if (!fabricRef.current) return { objects: [] };
|
||||
|
||||
logicalSizeRef.current.height = measureLogicalContentHeight(
|
||||
fabricRef.current,
|
||||
logicalSizeRef.current.height,
|
||||
);
|
||||
|
||||
const json = fabricRef.current.toJSON() as CanvasJSON;
|
||||
json.canvasWidth = logicalSizeRef.current.width;
|
||||
json.canvasHeight = logicalSizeRef.current.height;
|
||||
|
||||
return json;
|
||||
},
|
||||
|
||||
getJsonData: () => {
|
||||
if (!fabricRef.current) return "";
|
||||
|
||||
const json = fabricRef.current.toJSON() as CanvasJSON;
|
||||
json.canvasWidth = logicalSizeRef.current.width;
|
||||
json.canvasHeight = logicalSizeRef.current.height;
|
||||
|
||||
return JSON.stringify(json);
|
||||
},
|
||||
|
||||
getImages: () => {
|
||||
if (!fabricRef.current) return [];
|
||||
|
||||
const images = fabricRef.current.getObjects(
|
||||
"Image",
|
||||
) as FabricImageWithFile[];
|
||||
|
||||
return images.map((img) => ({
|
||||
src: img.getSrc(),
|
||||
file: img._customRawFile,
|
||||
}));
|
||||
},
|
||||
|
||||
loadData: async (data: CanvasJSON) => {
|
||||
if (!(fabricRef.current && wrapperRef.current)) {
|
||||
deferredDataRef.current = data;
|
||||
return;
|
||||
}
|
||||
|
||||
const textbox = await loadContent(
|
||||
fabricRef.current,
|
||||
data,
|
||||
wrapperRef.current,
|
||||
);
|
||||
|
||||
if (textbox) {
|
||||
textboxRef.current = textbox;
|
||||
setupTextboxInteractions(fabricRef.current, textbox);
|
||||
}
|
||||
|
||||
fabricRef.current.requestRenderAll();
|
||||
fixFabricA11y();
|
||||
},
|
||||
}));
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={wrapperRef}
|
||||
className="relative bg-paper shadow-primary-content rounded-sm w-full outline-none overflow-hidden cursor-text"
|
||||
>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute top-0 left-0"
|
||||
style={{ background: "transparent" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
ComposeCanvas.displayName = "ComposeCanvas";
|
||||
@@ -1,77 +0,0 @@
|
||||
import { GearFineIcon } from "@phosphor-icons/react";
|
||||
|
||||
interface DrawerSectionProps {
|
||||
id: string;
|
||||
title: string;
|
||||
count: string;
|
||||
isOpen: boolean;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DrawerSection({
|
||||
id,
|
||||
title,
|
||||
count,
|
||||
isOpen,
|
||||
onClick,
|
||||
children,
|
||||
}: DrawerSectionProps) {
|
||||
return (
|
||||
<div
|
||||
id={id}
|
||||
className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
|
||||
>
|
||||
<div
|
||||
className={`transition-all duration-1500 ease-in-out bg-neutral/10 ${
|
||||
isOpen
|
||||
? "max-h-125 opacity-100 py-3 border-b border-base-content/5 overflow-visible"
|
||||
: "max-h-0 opacity-0 pointer-events-none"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
<div
|
||||
className={`font-sans text-xs tracking-[0.2em] uppercase transition-colors duration-800 ${
|
||||
isOpen
|
||||
? "text-base-content"
|
||||
: "text-base-content/40 group-hover:text-base-content/80"
|
||||
}`}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className="font-sans text-[0.6rem] text-base-content/20 mt-1">
|
||||
{count}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{id === "vault" ? (
|
||||
<GearFineIcon
|
||||
className={
|
||||
"-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
|
||||
}
|
||||
weight={"duotone"}
|
||||
size={30}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${
|
||||
isOpen
|
||||
? "bg-primary/80! opacity-80 scale-110"
|
||||
: "group-hover:bg-primary"
|
||||
}`}
|
||||
>
|
||||
<div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import { WavesIcon } from "@phosphor-icons/react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import stamp from "../../assets/envelope/stamp.png";
|
||||
import waxSeal from "../../assets/envelope/waxSeal.png";
|
||||
|
||||
export interface EnvelopeRevealProps {
|
||||
recipient?: string;
|
||||
date?: string;
|
||||
onRevealComplete: () => void;
|
||||
ignite: boolean;
|
||||
}
|
||||
|
||||
export function EnvelopeReveal({
|
||||
recipient,
|
||||
date,
|
||||
onRevealComplete,
|
||||
ignite,
|
||||
}: EnvelopeRevealProps) {
|
||||
const [revealLetter, setRevealLetter] = useState(false);
|
||||
const [isFlipped, setIsFlipped] = useState(false);
|
||||
|
||||
const [burn, setBurn] = useState<{ width: number; height: number }>({
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
|
||||
const flapCheckbox = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ignite) return;
|
||||
const burnInterval = setInterval(() => {
|
||||
setBurn((prev) => ({ width: prev.width + 4, height: prev.height + 6 }));
|
||||
}, 100);
|
||||
return () => clearInterval(burnInterval);
|
||||
}, [ignite]);
|
||||
|
||||
const handleClick = () => {
|
||||
if (revealLetter) return;
|
||||
setRevealLetter(true);
|
||||
setTimeout(() => {
|
||||
onRevealComplete();
|
||||
}, 2500);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen mx-auto flex-col items-center flex justify-center">
|
||||
<div className="perspective-distant scale-80 duration-1000 transition-all animate-[pulse_2s_linear_1]">
|
||||
<div
|
||||
className={`relative h-70 w-105 transform-3d transition-transform duration-2000 ${isFlipped ? "rotate-y-180" : ""}`}
|
||||
>
|
||||
<div className=" flex backface-hidden rotate-y-180 justify-center transition-all duration-1000">
|
||||
<div
|
||||
id="env-top"
|
||||
className="z-4 delay-500 transition-all duration-2000 absolute peer h-40 w-54 mt-0 bg-base-200 mask mask-triangle-2 scale-x-234 has-checked:scale-y-[-1] has-checked:-translate-y-full has-checked:z-1 has-checked:duration-1000"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="transition checkbox absolute h-full w-full text-transparent bg-transparent z-100"
|
||||
ref={flapCheckbox}
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
className={
|
||||
"translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1500 cursor-pointer"
|
||||
}
|
||||
src={waxSeal}
|
||||
alt="Seal"
|
||||
onClick={() => flapCheckbox.current?.click()}
|
||||
onKeyDown={() => flapCheckbox.current?.click()}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
id="letter"
|
||||
className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
|
||||
onClick={handleClick}
|
||||
></button>
|
||||
|
||||
<div
|
||||
id="env-right"
|
||||
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3 pointer-events-none"
|
||||
></div>
|
||||
<div
|
||||
id="env-left"
|
||||
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3 pointer-events-none"
|
||||
></div>
|
||||
<button
|
||||
type="button"
|
||||
id="env-bottom"
|
||||
className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2"
|
||||
onClick={() => setIsFlipped((prev) => !prev)}
|
||||
>
|
||||
<span className={"text-neutral-content/60 font-xs font-display"}>
|
||||
to
|
||||
</span>
|
||||
<h1 className="text-3xl font-bold text-base-content">
|
||||
{recipient}
|
||||
</h1>
|
||||
<p className="text-base-content/60 font-display mt-8">{date}</p>
|
||||
<img
|
||||
src={stamp}
|
||||
alt={"stamp"}
|
||||
className={
|
||||
"z-0 rotate-6 opacity-80 text-accent absolute mt-0 mr-1 top-4 right-0"
|
||||
}
|
||||
/>
|
||||
<WavesIcon
|
||||
className={"absolute mt-0 mr-12 top-18 right-8 text-primary"}
|
||||
size={50}
|
||||
/>
|
||||
<WavesIcon
|
||||
className={"absolute mt-0 mr-4 top-18 right-8 text-primary"}
|
||||
size={50}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{ignite && (
|
||||
<div className="absolute w-90 h-60 bg-transparent z-100 overflow-hidden flex align-baseline">
|
||||
<div
|
||||
className="absolute border-2 border-amber-200 -bottom-3 -right-3 w-0 h-0 transition-all duration-500 bg-base-100 rounded-tl-full rounded-bl-full origin-bottom-right"
|
||||
style={{
|
||||
width: 2 * burn.width,
|
||||
height: 2 * burn.height,
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import { LockIcon, LockKeyOpenIcon } from "@phosphor-icons/react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { PATHS } from "../../config/routes";
|
||||
|
||||
export function LetterItem({
|
||||
preview,
|
||||
timestamp,
|
||||
id,
|
||||
status,
|
||||
unlock_at,
|
||||
isLocked = false,
|
||||
}: {
|
||||
preview: string;
|
||||
timestamp: string;
|
||||
id: string;
|
||||
status: "DRAFT" | "SEALED" | "BURNED";
|
||||
unlock_at?: string;
|
||||
isLocked?: boolean;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
function handleNavigate(): void {
|
||||
if (isLocked) return;
|
||||
if (status === "SEALED") {
|
||||
navigate(PATHS.read(id));
|
||||
} else {
|
||||
navigate(PATHS.write(id));
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNavigate}
|
||||
className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
|
||||
>
|
||||
<div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">
|
||||
{preview}
|
||||
</div>
|
||||
{unlock_at ? (
|
||||
<div className="flex flex-col items-end">
|
||||
{isLocked ? (
|
||||
<div className="font-sans text-xs badge badge-accent badge-soft rounded-2xl">
|
||||
<LockIcon weight="duotone" size={16} />
|
||||
Locked Until {unlock_at}
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-sans text-xs badge badge-primary badge-soft rounded-2xl">
|
||||
<LockKeyOpenIcon weight="duotone" size={16} /> Unlocked
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-sans text-[0.6rem] text-base-content/20 transition-none">
|
||||
{timestamp}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { LockKeyIcon } from "@phosphor-icons/react";
|
||||
|
||||
interface PasskeyModalProps {
|
||||
onUnlock: (password: string) => Promise<void>;
|
||||
}
|
||||
|
||||
export function PasskeyModal({ onUnlock }: PasskeyModalProps) {
|
||||
return (
|
||||
<div className="modal modal-open bg-base-100/20 backdrop-blur-md z-100">
|
||||
<div className="modal-box p-12 flex flex-col items-center">
|
||||
<LockKeyIcon
|
||||
size={48}
|
||||
className="text-primary mx-auto mb-8 animate-pulse"
|
||||
/>
|
||||
<h3 className="font-bold text-lg font-display text-primary">
|
||||
Authentication Required
|
||||
</h3>
|
||||
<p className="py-4 font-sans">
|
||||
We need your passkey to open your letters
|
||||
</p>
|
||||
<div className="divider w-1/2 mx-auto text-xs text-neutral-content/30 mt-0"></div>
|
||||
<p className="text-xs text-neutral-content/30 font-mono italic">
|
||||
Your passkey is used to decrypt your data locally.
|
||||
</p>
|
||||
<div className="modal-action items-center gap-4">
|
||||
<form
|
||||
className="form-control w-full inline-flex"
|
||||
onSubmit={async (e: React.SubmitEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const password = formData.get("password") as string;
|
||||
if (!password) return;
|
||||
await onUnlock(password);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
name="password"
|
||||
required
|
||||
type="password"
|
||||
placeholder="password"
|
||||
className="font-sans validator input input-bordered rounded-r-none"
|
||||
/>
|
||||
<div className="validator-message text-xs text-error"></div>
|
||||
<button type="submit" className="btn btn-primary rounded-l-none">
|
||||
Unlock
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user