g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Christmas theme and snow effects for December

Browse Source 
Introduces a Christmas theme that activates in December, including themed colors, subtle background patterns, and snowflake effects on loading screens. Adds a reusable SnowLoader component and utility for December detection. Updates layout and loading components to conditionally apply decorations and styles only during December.
This commit is contained in:
g
2025-12-08 00:47:57 +00:00
parent 224342c410
commit e7fcfd63a2
10 changed files with 139 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/dashboard/analytics/loading.tsx
View File

@@ -1,11 +1,13 @@
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import Layout from "@/components/layout/layout";
import { SnowLoader } from "@/components/snow-loader";
export default function AnalyticsLoading() {
return (
<Layout>
<div className="space-y-6">
<div className="space-y-6 relative">
<SnowLoader className="z-0" count={25} />
<div>
<Skeleton className="h-8 w-64 mb-2" />
<Skeleton className="h-4 w-96" />

2
app/dashboard/chats/[id]/loading.tsx
View File

@@ -2,6 +2,7 @@ import Layout from "@/components/layout/layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Loader2 } from "lucide-react";
import { SnowLoader } from "@/components/snow-loader";
export default function ChatDetailLoading() {
return (
@@ -18,6 +19,7 @@ export default function ChatDetailLoading() {
{/* Chat window */}
<div className="border rounded-lg h-[calc(100vh-12rem)] flex flex-col relative">
<SnowLoader className="z-0" count={20} />
{/* Chat messages area */}
<div className="flex-1 p-4 overflow-hidden">
<div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">

4
app/dashboard/loading.tsx
View File

@@ -4,6 +4,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Skeleton } from "@/components/ui/skeleton";
import Layout from "@/components/layout/layout";
import { Loader2 } from "lucide-react";
import { SnowLoader } from "@/components/snow-loader";
export default function DashboardLoading() {
return (
@@ -36,7 +37,8 @@ export default function DashboardLoading() {
{/* Best selling products skeleton */}
<Card className="border-border/40 shadow-sm mt-8 relative">
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<SnowLoader className="z-0" count={30} />
<div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
<div className="flex flex-col items-center justify-center bg-background/80 backdrop-blur-[2px] p-6 rounded-lg">
<Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
<p className="text-lg font-medium">Loading dashboard data...</p>

4
app/dashboard/orders/[id]/loading.tsx
View File

@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import Layout from "@/components/layout/layout";
import { Loader2 } from "lucide-react";
import { SnowLoader } from "@/components/snow-loader";
export default function OrderDetailsLoading() {
return (
@@ -77,7 +78,8 @@ export default function OrderDetailsLoading() {
{/* Loading overlay */}
<div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-[2px] pointer-events-none">
<div className="flex flex-col items-center justify-center p-6 rounded-lg">
<SnowLoader className="z-0" count={30} />
<div className="flex flex-col items-center justify-center p-6 rounded-lg z-10 relative">
<Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
<p className="text-lg font-medium">Loading order details...</p>
</div>