Miran
/
reya-render
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

small tweaks

Browse Source
main
miranshala 7 months ago
parent 203295aab6
commit 3b56fffa57
3 changed files with 161 additions and 106 deletions
Show Stats Download Patch File Download Diff File

58
app/page.tsx
Unescape View File

@ -209,12 +209,12 @@ export default function Home() {
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-56">
<DropdownMenuItem asChild>
<DropdownMenuItem asChild className="md:hidden">
<a href="/contact" className="cursor-pointer">
Contact
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<DropdownMenuItem asChild className="md:hidden">
<a
href="#pricing"
onClick={(e) => {
@ -232,12 +232,12 @@ export default function Home() {
Pricing
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<DropdownMenuItem asChild className="md:hidden">
<a href="/upload" className="cursor-pointer">
Upload File
</a>
</DropdownMenuItem>
<div className="border-t border-gray-200 my-1" />
<div className="border-t border-gray-200 my-1 md:hidden" />
<DropdownMenuItem asChild>
<a href="/subscriptions" className="cursor-pointer">
My Subscriptions
@ -357,13 +357,14 @@ export default function Home() {
)}
{/* Main Content */}
<div className="flex items-center justify-center min-h-screen">
<div className="flex items-center justify-center min-h-screen -mt-4 md:mt-0">
<div
className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative"
className="w-[90%] md:w-[90%] h-auto md:h-[600px] rounded-2xl flex flex-col md:flex-row justify-between items-start relative mt-2 md:mt-5"
style={{
backgroundColor: "#FF580F",
margin: "20px",
marginTop: "5px",
marginLeft: "20px",
marginRight: "20px",
marginBottom: "20px",
}}
>
<div className="px-4 md:ml-8 mt-8 md:mt-16 w-full md:w-auto pb-8 md:pb-0">
@ -425,7 +426,7 @@ export default function Home() {
userSubscription &&
userSubscription.status === "ACTIVE" && (
<div className="flex justify-center mt-8">
<div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl">
<div className="bg-green-50 border-2 border-green-500 rounded-lg p-6 max-w-2xl mx-5 md:mx-0">
<div className="flex items-center justify-between">
<div>
<p className="text-green-800 font-semibold text-lg mb-1">
@ -448,20 +449,23 @@ export default function Home() {
)}
{/* Pricing Section */}
<div id="pricing" className="flex justify-center mt-16 mb-16">
<div
id="pricing"
className="flex justify-center mt-8 sm:mt-16 mb-16 sm:mb-16 pb-20 sm:pb-16"
>
<div className="w-[90%]">
<h2 className="text-4xl font-bold text-center mb-12 text-gray-800">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 sm:mb-12 text-gray-800">
Available Plans
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
{/* Basic Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2">
Basic
</div>
<div className="text-4xl font-bold text-orange-500 mb-8">
<div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€9.99{" "}
<span className="text-lg font-normal text-gray-500">
<span className="text-base sm:text-lg font-normal text-gray-500">
/month
</span>
</div>
@ -471,7 +475,7 @@ export default function Home() {
loading ||
(userSubscription && userSubscription.status === "ACTIVE")
}
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
>
{loading
? "Processing..."
@ -479,7 +483,7 @@ export default function Home() {
? "Current Plan"
: "Choose Basic"}
</button>
<ul className="text-left space-y-3">
<ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span>
250 GB storage
@ -504,13 +508,13 @@ export default function Home() {
</div>
{/* Standard Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2">
Standard
</div>
<div className="text-4xl font-bold text-orange-500 mb-8">
<div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€19.99{" "}
<span className="text-lg font-normal text-gray-500">
<span className="text-base sm:text-lg font-normal text-gray-500">
/month
</span>
</div>
@ -520,7 +524,7 @@ export default function Home() {
loading ||
(userSubscription && userSubscription.status === "ACTIVE")
}
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
>
{loading
? "Processing..."
@ -528,7 +532,7 @@ export default function Home() {
? "Current Plan"
: "Choose Standard"}
</button>
<ul className="text-left space-y-3">
<ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span>
500 GB storage
@ -561,13 +565,13 @@ export default function Home() {
</div>
{/* Premium Plan */}
<div className="bg-white border-2 border-gray-200 rounded-xl p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="bg-white border-2 border-gray-200 rounded-xl p-6 sm:p-8 text-center transition-all hover:transform hover:-translate-y-2 hover:shadow-xl hover:border-orange-500 cursor-pointer">
<div className="text-2xl font-bold text-orange-500 mb-2">
Premium
</div>
<div className="text-4xl font-bold text-orange-500 mb-8">
<div className="text-3xl sm:text-4xl font-bold text-orange-500 mb-6 sm:mb-8">
€39.99{" "}
<span className="text-lg font-normal text-gray-500">
<span className="text-base sm:text-lg font-normal text-gray-500">
/month
</span>
</div>
@ -577,7 +581,7 @@ export default function Home() {
loading ||
(userSubscription && userSubscription.status === "ACTIVE")
}
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full bg-orange-500 text-white py-3 px-6 rounded-lg font-medium mb-4 sm:mb-6 hover:bg-orange-600 transition-colors hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed text-sm sm:text-base"
>
{loading
? "Processing..."
@ -585,7 +589,7 @@ export default function Home() {
? "Current Plan"
: "Choose Premium"}
</button>
<ul className="text-left space-y-3">
<ul className="text-left space-y-2 sm:space-y-3 text-sm sm:text-base">
<li className="flex items-center">
<span className="text-green-500 font-bold mr-3">✓</span>1 TB
storage

170
app/renders/page.tsx
Unescape View File

@ -52,7 +52,7 @@ export default function RendersPage() {
const res = await fetch(
`/api/renders/in?page=${pageNum}&pageSize=${pageSize}`,
{
headers: { "user-id": user?.id },
headers: { "user-id": user?.id || "" },
}
);
const data = await res.json();
@ -102,12 +102,14 @@ export default function RendersPage() {
const canNext = page < totalPages;
return (
<div className="min-h-screen bg-gray-50 py-12">
<div className="max-w-5xl mx-auto px-4">
<h1 className="text-4xl font-bold text-gray-900 mb-8">My Renders</h1>
<div className="min-h-screen bg-gray-50 py-6 sm:py-12">
<div className="max-w-5xl mx-auto px-4 sm:px-6">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-6 sm:mb-8">
My Renders
</h1>
<section className="mb-12">
<h2 className="text-2xl font-bold text-orange-600 mb-4">
<section className="mb-8 sm:mb-12">
<h2 className="text-xl sm:text-2xl font-bold text-orange-600 mb-4">
Uploaded Files
</h2>
{loading ? (
@ -116,62 +118,104 @@ export default function RendersPage() {
<div className="text-gray-500">No files uploaded yet.</div>
) : (
<>
<table className="w-full bg-white rounded-lg shadow-md">
<thead>
<tr className="bg-orange-50">
<th className="p-3 text-left font-semibold">Filename</th>
<th className="p-3 text-left font-semibold">Status</th>
<th className="p-3 text-left font-semibold">Uploaded At</th>
<th className="p-3 text-left font-semibold">Download</th>
<th className="p-3 text-left font-semibold">Actions</th>
</tr>
</thead>
<tbody>
{files.map((f) => (
<tr key={f.id} className="border-t">
<td className="p-3">{f.original_name}</td>
<td className="p-3 capitalize">
<span
className={`px-2 py-1 rounded-full text-xs font-bold ${
f.upload_status === "COMPLETE"
? "bg-green-100 text-green-800"
: "bg-gray-200 text-gray-600"
}`}
>
{f.upload_status}
</span>
</td>
<td className="p-3">
{new Date(f.created_at).toLocaleString()}
</td>
<td className="p-3">
<a
href={
f.file_path
? `/uploads/${f.file_path.split("/").pop()}`
: "#"
}
className="underline text-blue-700"
target="_blank"
rel="noopener noreferrer"
download={f.original_name}
>
<div className="overflow-x-auto -mx-4 sm:mx-0">
<div className="inline-block min-w-full align-middle">
<table className="min-w-full bg-white rounded-lg shadow-md">
<thead>
<tr className="bg-orange-50">
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Filename
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Status
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm hidden sm:table-cell">
Uploaded At
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Download
</a>
</td>
<td className="p-3">
<button
className="px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
disabled={deletingId === f.id}
onClick={() => handleDelete(f.id)}
>
{deletingId === f.id ? "Deleting..." : "Delete"}
</button>
</td>
</tr>
))}
</tbody>
</table>
</th>
<th className="p-2 sm:p-3 text-left font-semibold text-xs sm:text-sm">
Actions
</th>
</tr>
</thead>
<tbody>
{files.map((f) => (
<tr key={f.id} className="border-t">
<td className="p-2 sm:p-3 text-xs sm:text-sm break-words max-w-[120px] sm:max-w-none">
{f.original_name}
</td>
<td className="p-2 sm:p-3 capitalize">
{/* Mobile: Green checkmark */}
{f.upload_status === "COMPLETE" && (
<span className="sm:hidden text-green-500 text-xl">
✓
</span>
)}
{f.upload_status !== "COMPLETE" && (
<span className="sm:hidden text-gray-400 text-xl">
○
</span>
)}
{/* Desktop: Text badge */}
<span
className={`hidden sm:inline-block px-2 py-1 rounded-full text-xs font-bold ${
f.upload_status === "COMPLETE"
? "bg-green-100 text-green-800"
: "bg-gray-200 text-gray-600"
}`}
>
{f.upload_status}
</span>
</td>
<td className="p-2 sm:p-3 text-xs sm:text-sm hidden sm:table-cell">
{new Date(f.created_at).toLocaleString()}
</td>
<td className="p-2 sm:p-3">
<a
href={
f.file_path
? `/uploads/${f.file_path.split("/").pop()}`
: "#"
}
className="underline text-blue-700 text-xs sm:text-sm"
target="_blank"
rel="noopener noreferrer"
download={f.original_name}
>
Download
</a>
</td>
<td className="p-2 sm:p-3">
{/* Mobile: Red X icon - circular */}
<button
className="sm:hidden w-6 h-6 rounded-full bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300 disabled:opacity-50 flex items-center justify-center"
disabled={deletingId === f.id}
onClick={() => handleDelete(f.id)}
aria-label="Delete"
>
{deletingId === f.id ? (
<span className="text-xs">...</span>
) : (
<span className="text-sm font-bold">×</span>
)}
</button>
{/* Desktop: Text button */}
<button
className="hidden sm:inline-block px-3 py-1 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 disabled:bg-red-300"
disabled={deletingId === f.id}
onClick={() => handleDelete(f.id)}
>
{deletingId === f.id ? "Deleting..." : "Delete"}
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="mt-4 flex justify-center">
<Pagination>
<PaginationContent>
@ -225,10 +269,10 @@ export default function RendersPage() {
</section>
<section>
<h2 className="text-2xl font-bold text-gray-600 mb-4">
<h2 className="text-xl sm:text-2xl font-bold text-gray-600 mb-4">
Rendered Files (outputs)
</h2>
<div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center text-gray-400">
<div className="border-2 border-dashed border-gray-300 rounded-lg p-4 sm:p-8 text-center text-gray-400 text-sm sm:text-base">
Placeholder: Your rendered products will appear here in the future!
</div>
</section>

39
app/subscriptions/page.tsx
Unescape View File

@ -141,21 +141,21 @@ export default function SubscriptionsPage() {
};
return (
<div className="min-h-screen bg-gray-50 py-12">
<div className="min-h-screen bg-gray-50 py-6 sm:py-12 pb-20 sm:pb-12">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 mb-2">
<div className="mb-6 sm:mb-8">
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2">
My Subscriptions
</h1>
<p className="text-gray-600">
<p className="text-sm sm:text-base text-gray-600">
Manage your subscription and billing information
</p>
</div>
{!subscription ? (
// No subscription
<div className="bg-white rounded-lg shadow-lg p-8 text-center">
<div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 text-center">
<div className="mb-6">
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-3xl">📦</span>
@ -177,15 +177,17 @@ export default function SubscriptionsPage() {
</div>
) : (
// Active subscription
<div className="space-y-6">
<div className="space-y-4 sm:space-y-6">
{/* Subscription Card */}
<div className="bg-white rounded-lg shadow-lg p-8 border-2 border-gray-200">
<div className="flex justify-between items-start mb-6">
<div className="bg-white rounded-lg shadow-lg p-6 sm:p-8 border-2 border-gray-200">
<div className="flex justify-between items-start mb-4 sm:mb-6">
<div>
<h2 className="text-2xl font-bold text-gray-900 mb-2">
<h2 className="text-xl sm:text-2xl font-bold text-gray-900 mb-2">
{getTierDisplayName(subscription.tier)} Plan
</h2>
<p className="text-gray-600">Current subscription details</p>
<p className="text-sm sm:text-base text-gray-600">
Current subscription details
</p>
</div>
<div className="text-right">
<span
@ -201,7 +203,7 @@ export default function SubscriptionsPage() {
</div>
{/* Subscription Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
<div>
<p className="text-sm text-gray-500 mb-1">Plan</p>
<p className="text-lg font-semibold text-gray-900">
@ -223,7 +225,12 @@ export default function SubscriptionsPage() {
<div>
<p className="text-sm text-gray-500 mb-1">Current Usage</p>
<p className="text-lg font-semibold text-gray-900">
{parseFloat(subscription.current_usage_gb).toFixed(2)} GB
{typeof subscription.current_usage_gb === "number"
? subscription.current_usage_gb.toFixed(2)
: parseFloat(
String(subscription.current_usage_gb)
).toFixed(2)}{" "}
GB
</p>
</div>
</div>
@ -258,17 +265,17 @@ export default function SubscriptionsPage() {
</div>
{/* Upgrade/Downgrade Options */}
<div className="bg-white rounded-lg shadow-lg p-6">
<h3 className="text-xl font-bold text-gray-900 mb-4">
<div className="bg-white rounded-lg shadow-lg p-6 mb-4 sm:mb-0">
<h3 className="text-lg sm:text-xl font-bold text-gray-900 mb-3 sm:mb-4">
Change Plan
</h3>
<p className="text-gray-600 mb-4">
<p className="text-sm sm:text-base text-gray-600 mb-4">
Looking to upgrade or downgrade? Cancel your current
subscription and choose a new plan.
</p>
<Button
onClick={() => router.push("/")}
className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md"
className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-6 py-3 rounded-md w-full sm:w-auto"
>
Browse All Plans
</Button>

Write Preview
Loading…
Cancel
Save