Skip to content

Commit fccd06f

Browse files
JhaSourav07JhaSourav07
committed
refactor: alias framer-motion components as Motion to standardize imports across pages
1 parent 67a56c9 commit fccd06f

10 files changed

Lines changed: 70 additions & 69 deletions

File tree

‎src/components/layout/Navbar.jsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useRef, useEffect } from "react";
22
import { Link } from "react-router-dom";
33
import { FileText, Menu, X, LogOut, Crown, Copy, Check, Star, ChevronDown } from "lucide-react";
4-
import { AnimatePresence } from "framer-motion";
4+
import { AnimatePresence, motion as Motion } from "framer-motion";
55
import { useAccount, useDisconnect } from "wagmi";
66
import { ConnectButton } from "@rainbow-me/rainbowkit";
77
import { useSubscription } from "../../hooks/useSubscription";
@@ -51,7 +51,7 @@ function WalletMenu({ address, isPremium }) {
5151

5252
<AnimatePresence>
5353
{open && (
54-
<motion.div
54+
<Motion.div
5555
initial={{ opacity: 0, y: 6, scale: 0.97 }}
5656
animate={{ opacity: 1, y: 0, scale: 1 }}
5757
exit={{ opacity: 0, y: 6, scale: 0.97 }}
@@ -97,7 +97,7 @@ function WalletMenu({ address, isPremium }) {
9797
<LogOut className="w-4 h-4" />
9898
Disconnect wallet
9999
</button>
100-
</motion.div>
100+
</Motion.div>
101101
)}
102102
</AnimatePresence>
103103
</div>
@@ -130,7 +130,7 @@ function EditDropdown() {
130130

131131
<AnimatePresence>
132132
{isOpen && (
133-
<motion.div
133+
<Motion.div
134134
initial={{ opacity: 0, y: -10, scale: 0.95 }}
135135
animate={{ opacity: 1, y: 0, scale: 1 }}
136136
exit={{ opacity: 0, y: -10, scale: 0.95 }}
@@ -148,7 +148,7 @@ function EditDropdown() {
148148
</Link>
149149
))}
150150
</div>
151-
</motion.div>
151+
</Motion.div>
152152
)}
153153
</AnimatePresence>
154154
</div>
@@ -179,7 +179,7 @@ function ConvertDropdown() {
179179

180180
<AnimatePresence>
181181
{isOpen && (
182-
<motion.div
182+
<Motion.div
183183
initial={{ opacity: 0, y: -10, scale: 0.95 }}
184184
animate={{ opacity: 1, y: 0, scale: 1 }}
185185
exit={{ opacity: 0, y: -10, scale: 0.95 }}
@@ -197,7 +197,7 @@ function ConvertDropdown() {
197197
</Link>
198198
))}
199199
</div>
200-
</motion.div>
200+
</Motion.div>
201201
)}
202202
</AnimatePresence>
203203
</div>
@@ -228,7 +228,7 @@ function OptimizeDropdown() {
228228

229229
<AnimatePresence>
230230
{isOpen && (
231-
<motion.div
231+
<Motion.div
232232
initial={{ opacity: 0, y: -10, scale: 0.95 }}
233233
animate={{ opacity: 1, y: 0, scale: 1 }}
234234
exit={{ opacity: 0, y: -10, scale: 0.95 }}
@@ -246,7 +246,7 @@ function OptimizeDropdown() {
246246
</Link>
247247
))}
248248
</div>
249-
</motion.div>
249+
</Motion.div>
250250
)}
251251
</AnimatePresence>
252252
</div>
@@ -276,7 +276,7 @@ function SecurityDropdown() {
276276

277277
<AnimatePresence>
278278
{isOpen && (
279-
<motion.div
279+
<Motion.div
280280
initial={{ opacity: 0, y: -10, scale: 0.95 }}
281281
animate={{ opacity: 1, y: 0, scale: 1 }}
282282
exit={{ opacity: 0, y: -10, scale: 0.95 }}
@@ -294,7 +294,7 @@ function SecurityDropdown() {
294294
</Link>
295295
))}
296296
</div>
297-
</motion.div>
297+
</Motion.div>
298298
)}
299299
</AnimatePresence>
300300
</div>
@@ -377,7 +377,7 @@ export function Navbar() {
377377

378378
<AnimatePresence>
379379
{isOpen && (
380-
<motion.div
380+
<Motion.div
381381
initial={{ opacity: 0, height: 0 }}
382382
animate={{ opacity: 1, height: "auto" }}
383383
exit={{ opacity: 0, height: 0 }}
@@ -419,7 +419,7 @@ export function Navbar() {
419419
)}
420420
</div>
421421
</div>
422-
</motion.div>
422+
</Motion.div>
423423
)}
424424
</AnimatePresence>
425425
</nav>

‎src/components/ui/FeedbackWidget.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from "react";
22
import { MessageSquarePlus, X, Bug, Lightbulb, Star, Send, CheckCircle2, Loader2, ChevronDown } from "lucide-react";
3-
import { AnimatePresence } from "framer-motion";
3+
import { AnimatePresence, motion as Motion } from "framer-motion";
44
import { collection, addDoc, serverTimestamp } from "firebase/firestore";
55
import { db } from "../../lib/firebase";
66

@@ -70,12 +70,12 @@ export function FeedbackWidget() {
7070
{/* Backdrop + Modal */}
7171
<AnimatePresence>
7272
{open && (
73-
<motion.div
73+
<Motion.div
7474
initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
7575
className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-end sm:items-center justify-center p-4"
7676
onClick={e => { if (e.target === e.currentTarget) { setOpen(false); setTimeout(reset, 300); } }}
7777
>
78-
<motion.div
78+
<Motion.div
7979
initial={{ opacity: 0, y: 40, scale: 0.95 }}
8080
animate={{ opacity: 1, y: 0, scale: 1 }}
8181
exit={{ opacity: 0, y: 20, scale: 0.97 }}
@@ -100,9 +100,9 @@ export function FeedbackWidget() {
100100
{sent ? (
101101
/* ── Success state ── */
102102
<div className="flex flex-col items-center justify-center py-14 gap-4">
103-
<motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.5 }}>
103+
<Motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.5 }}>
104104
<CheckCircle2 className="w-14 h-14 text-emerald-400" />
105-
</motion.div>
105+
</Motion.div>
106106
<p className="text-white font-semibold text-lg">Thank you!</p>
107107
<p className="text-zinc-500 text-sm text-center px-8">Your feedback has been received. We read every submission.</p>
108108
</div>
@@ -194,8 +194,8 @@ export function FeedbackWidget() {
194194
</button>
195195
</form>
196196
)}
197-
</motion.div>
198-
</motion.div>
197+
</Motion.div>
198+
</Motion.div>
199199
)}
200200
</AnimatePresence>
201201
</>

‎src/pages/Admin/Admin.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
CheckCircle2, Circle, Trash2, RefreshCw, Mail,
55
Filter, BarChart3, MessageSquare,
66
} from "lucide-react";
7-
import { AnimatePresence } from "framer-motion";
7+
import { AnimatePresence, motion as Motion } from "framer-motion";
88
import {
99
collection, onSnapshot, doc, updateDoc, deleteDoc,
1010
query, orderBy,
@@ -43,7 +43,7 @@ function LoginScreen({ onAuth }) {
4343

4444
return (
4545
<div className="min-h-screen flex items-center justify-center px-4 bg-black">
46-
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
46+
<Motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
4747
className="w-full max-w-sm bg-[#0a0a0a] border border-white/10 rounded-3xl p-8 shadow-2xl">
4848
<div className="text-center mb-8">
4949
<div className="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-white text-black mb-4">
@@ -65,7 +65,7 @@ function LoginScreen({ onAuth }) {
6565
</button>
6666
{err && <p className="text-center text-red-400 text-xs">Incorrect password</p>}
6767
</form>
68-
</motion.div>
68+
</Motion.div>
6969
</div>
7070
);
7171
}
@@ -95,7 +95,7 @@ function FeedbackCard({ item, onToggleResolved, onDelete }) {
9595
}
9696

9797
return (
98-
<motion.div layout initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.97 }}
98+
<Motion.div layout initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.97 }}
9999
className={`bg-[#0a0a0a] border rounded-2xl p-5 space-y-3 transition-all
100100
${item.resolved ? "border-white/[0.04] opacity-60" : "border-white/10"}`}>
101101

@@ -148,7 +148,7 @@ function FeedbackCard({ item, onToggleResolved, onDelete }) {
148148
{item.userAgent?.split(")")[0]?.replace("Mozilla/5.0 (", "")}
149149
</span>
150150
</div>
151-
</motion.div>
151+
</Motion.div>
152152
);
153153
}
154154

‎src/pages/Compress/Compress.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from "react";
22
import { useFileStore } from "../../hooks/useFileStore";
33
import { Minimize2, X, Download, Loader2, Zap, ShieldCheck, Gauge, Flame } from "lucide-react";
4-
import { AnimatePresence } from "framer-motion";
4+
import { AnimatePresence, motion as Motion } from "framer-motion";
55
import { Button } from "../../components/ui/Button";
66
import { UpgradeButton } from "../../components/ui/UpgradeButton";
77
import { compressWithQuality } from "../../services/pdf.service";
@@ -118,15 +118,15 @@ export function Compress() {
118118

119119
<AnimatePresence>
120120
{result && (
121-
<motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }}
121+
<Motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }}
122122
className="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 flex items-center justify-between"
123123
>
124124
<div className="flex flex-col">
125125
<span className="text-emerald-400 font-semibold text-sm">Compression Complete</span>
126126
<span className="text-emerald-500/80 text-xs mt-0.5">Saved {result.savings}% · New size: {formatFileSize(result.size)}</span>
127127
</div>
128128
<div className="text-emerald-400 font-bold text-xl">-{result.savings}%</div>
129-
</motion.div>
129+
</Motion.div>
130130
)}
131131
</AnimatePresence>
132132

‎src/pages/EditPdf/EditPdf.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { motion as Motion } from "framer-motion";
12
import React, { useState, useRef, useEffect } from "react";
23
import { useFileStore } from "../../hooks/useFileStore";
34
import {
@@ -235,10 +236,10 @@ export function EditPdf() {
235236
if (!file || (!pages.length && !isLoading)) return (
236237
<div className="max-w-3xl mx-auto py-16 px-4">
237238
<div className="text-center mb-12">
238-
<motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", duration: 0.6 }}
239+
<Motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ type: "spring", duration: 0.6 }}
239240
className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-white text-black mb-6 shadow-[0_0_50px_rgba(255,255,255,0.15)]">
240241
<FileEdit className="w-10 h-10" />
241-
</motion.div>
242+
</Motion.div>
242243
<h1 className="text-5xl font-black text-white mb-4 tracking-tighter uppercase">Edit PDF</h1>
243244
<p className="text-zinc-500 text-lg font-light max-w-md mx-auto">Draw, annotate, highlight — or click existing text to edit it directly in the browser.</p>
244245
</div>

‎src/pages/Grayscale/Grayscale.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from "react";
22
import { useFileStore } from "../../hooks/useFileStore";
33
import { Contrast, X, Download, Loader2, FileText } from "lucide-react";
4-
import { AnimatePresence } from "framer-motion";
4+
import { AnimatePresence, motion as Motion } from "framer-motion";
55
import { Button } from "../../components/ui/Button";
66
import { UpgradeButton } from "../../components/ui/UpgradeButton";
77
import { convertToGrayscale } from "../../services/pdf.service";
@@ -88,7 +88,7 @@ export function Grayscale() {
8888

8989
<AnimatePresence mode="wait">
9090
{isProcessing ? (
91-
<motion.div key="processing" initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }}
91+
<Motion.div key="processing" initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }}
9292
className="bg-zinc-900/50 border border-white/10 rounded-xl p-6 text-center"
9393
>
9494
<Loader2 className="w-8 h-8 text-white animate-spin mx-auto mb-3" />
@@ -97,15 +97,15 @@ export function Grayscale() {
9797
<div className="w-full bg-zinc-800 rounded-full h-1.5 mt-4 overflow-hidden">
9898
<div className="bg-white h-1.5 rounded-full transition-all duration-300 ease-out" style={{ width: `${(progress.current / progress.total) * 100}%` }} />
9999
</div>
100-
</motion.div>
100+
</Motion.div>
101101
) : result ? (
102-
<motion.div key="success" initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}
102+
<Motion.div key="success" initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}
103103
className="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-6 flex flex-col items-center justify-center text-center"
104104
>
105105
<Contrast className="w-10 h-10 text-emerald-400 mb-3" />
106106
<span className="text-emerald-400 font-bold text-lg">Conversion Complete!</span>
107107
<span className="text-emerald-500/80 text-sm mt-1">Ready to download ({formatFileSize(result.size)})</span>
108-
</motion.div>
108+
</Motion.div>
109109
) : null}
110110
</AnimatePresence>
111111

‎src/pages/ImageToPdf/ImageToPdf.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useRef, useCallback } from "react";
22
import { useFileStore } from "../../hooks/useFileStore";
33
import { Image as ImageIcon, X, Download, Loader2, CheckCircle2, Plus, GripVertical } from "lucide-react";
4-
import { AnimatePresence } from "framer-motion";
4+
import { AnimatePresence, motion as Motion } from "framer-motion";
55
import { Button } from "../../components/ui/Button";
66
import { UpgradeButton } from "../../components/ui/UpgradeButton";
77
import { Dropzone } from "../../components/pdf/Dropzone";
@@ -19,7 +19,7 @@ function makeItem(file) {
1919
function ThumbCard({ item, onRemove, onDragStart, onDragEnter, onDragEnd }) {
2020
const [over, setOver] = useState(false);
2121
return (
22-
<motion.div
22+
<Motion.div
2323
layout
2424
initial={{ opacity: 0, scale: 0.92 }}
2525
animate={{ opacity: 1, scale: 1 }}
@@ -68,7 +68,7 @@ function ThumbCard({ item, onRemove, onDragStart, onDragEnter, onDragEnd }) {
6868
>
6969
<X className="w-3 h-3" />
7070
</button>
71-
</motion.div>
71+
</Motion.div>
7272
);
7373
}
7474

@@ -162,14 +162,14 @@ export function ImageToPdf() {
162162

163163
{/* Header */}
164164
<div className="text-center mb-12">
165-
<motion.div
165+
<Motion.div
166166
initial={{ scale: 0.8, opacity: 0 }}
167167
animate={{ scale: 1, opacity: 1 }}
168168
transition={{ duration: 0.6, type: "spring" }}
169169
className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-white text-black mb-6 shadow-[0_0_50px_rgba(255,255,255,0.15)]"
170170
>
171171
<ImageIcon className="w-10 h-10" />
172-
</motion.div>
172+
</Motion.div>
173173
<h1 className="text-5xl font-black text-white mb-4 tracking-tighter uppercase">Image to PDF</h1>
174174
<p className="text-zinc-500 text-lg font-light max-w-md mx-auto">
175175
Convert JPG &amp; PNG images into a PDF. Drag thumbnails to set the page order.
@@ -179,13 +179,13 @@ export function ImageToPdf() {
179179
{/* Error */}
180180
<AnimatePresence>
181181
{error && (
182-
<motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}
182+
<Motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }}
183183
className="mb-6 overflow-hidden"
184184
>
185185
<div className="px-4 py-3 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm">
186186
{error}
187187
</div>
188-
</motion.div>
188+
</Motion.div>
189189
)}
190190
</AnimatePresence>
191191

@@ -198,7 +198,7 @@ export function ImageToPdf() {
198198
hintText="JPG, PNG only"
199199
/>
200200
) : (
201-
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="pb-36">
201+
<Motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="pb-36">
202202

203203
{/* Toolbar */}
204204
<div className="flex flex-wrap items-center justify-between gap-3 mb-6 p-4 bg-zinc-900/50 border border-white/[0.06] rounded-2xl">
@@ -254,7 +254,7 @@ export function ImageToPdf() {
254254
>
255255
<Plus className="w-4 h-4" /> Drop more images or click to add
256256
</div>
257-
</motion.div>
257+
</Motion.div>
258258
)}
259259

260260
{/* Sticky bottom bar */}

0 commit comments

Comments
 (0)