Skip to content

Commit ca5f695

Browse files
arihantcodesarihantcodes
committed
add :alert ,feadback,animated svg
1 parent 570eceb commit ca5f695

File tree

17 files changed

+784
-72
lines changed

17 files changed

+784
-72
lines changed

‎app/(docs)/docs/alert/alertdemo.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* eslint-disable react/no-unescaped-entities */
2+
"use client";
3+
4+
import { Alert } from "@/components/ui/alert";
5+
import { cn } from "@/lib/utils";
6+
import { motion } from "framer-motion";
7+
import { PartyPopper } from "lucide-react";
8+
9+
interface Alert04Props {
10+
className?: string;
11+
}
12+
13+
export default function Alertdemo({ className }: Alert04Props) {
14+
return (
15+
<motion.div
16+
initial={{ opacity: 0, y: -8 }}
17+
animate={{ opacity: 1, y: 0 }}
18+
className={cn("w-full max-w-xl mx-auto", className)}
19+
>
20+
<Alert className={cn(
21+
"relative overflow-hidden",
22+
"bg-gradient-to-b from-violet-50 to-white",
23+
"dark:from-violet-950/20 dark:to-zinc-950",
24+
"border border-violet-100 dark:border-violet-900/50",
25+
"shadow-[0_1px_6px_0_rgba(139,92,246,0.06)]",
26+
"rounded-xl p-4",
27+
className
28+
)}>
29+
<div className="flex items-center gap-4">
30+
<motion.div
31+
initial={{ rotate: -15, scale: 0.5 }}
32+
animate={{ rotate: 0, scale: 1 }}
33+
transition={{
34+
type: "spring",
35+
stiffness: 300,
36+
damping: 20
37+
}}
38+
>
39+
<div className={cn(
40+
"p-2.5 rounded-xl",
41+
"bg-gradient-to-br from-fuchsia-500 via-violet-500 to-indigo-500",
42+
"dark:from-fuchsia-600 dark:via-violet-600 dark:to-indigo-600",
43+
)}>
44+
<PartyPopper className="h-5 w-5 text-white" />
45+
</div>
46+
</motion.div>
47+
48+
<div className="space-y-1">
49+
<motion.h3
50+
initial={{ opacity: 0, x: 20 }}
51+
animate={{ opacity: 1, x: 0 }}
52+
transition={{ delay: 0.1 }}
53+
className={cn(
54+
"font-medium",
55+
"text-violet-900 dark:text-violet-100"
56+
)}
57+
>
58+
Amazing milestone! 🎉
59+
</motion.h3>
60+
<motion.p
61+
initial={{ opacity: 0, x: 20 }}
62+
animate={{ opacity: 1, x: 0 }}
63+
transition={{ delay: 0.2 }}
64+
className={cn(
65+
"text-sm",
66+
"text-violet-600 dark:text-violet-300"
67+
)}
68+
>
69+
You've just hit 1,000 followers on your journey!
70+
</motion.p>
71+
</div>
72+
</div>
73+
74+
{/* Confetti effect */}
75+
<div className="absolute inset-0 pointer-events-none">
76+
<div className="absolute -left-2 -top-2 h-16 w-16 rounded-full bg-fuchsia-400 dark:bg-fuchsia-600/30 blur-2xl opacity-20" />
77+
<div className="absolute top-2 right-8 h-12 w-12 rounded-full bg-violet-400 dark:bg-violet-600/30 blur-2xl opacity-20" />
78+
<div className="absolute -right-2 -bottom-2 h-16 w-16 rounded-full bg-indigo-400 dark:bg-indigo-600/30 blur-2xl opacity-20" />
79+
</div>
80+
81+
{/* Celebration badge */}
82+
<div className="absolute top-4 right-4">
83+
<motion.div
84+
initial={{ scale: 0 }}
85+
animate={{ scale: 1 }}
86+
transition={{
87+
type: "spring",
88+
stiffness: 300,
89+
damping: 20,
90+
delay: 0.3
91+
}}
92+
className={cn(
93+
"text-[11px] font-medium",
94+
"px-2.5 py-0.5 rounded-full",
95+
"bg-gradient-to-r from-fuchsia-500/10 via-violet-500/10 to-indigo-500/10",
96+
"dark:from-fuchsia-500/20 dark:via-violet-500/20 dark:to-indigo-500/20",
97+
"text-violet-700 dark:text-violet-200",
98+
"ring-1 ring-violet-500/20 dark:ring-violet-400/20"
99+
)}
100+
>
101+
Milestone
102+
</motion.div>
103+
</div>
104+
</Alert>
105+
</motion.div>
106+
);
107+
}

‎app/(docs)/docs/alert/page.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import { PageSubTitle, PageTemplate } from "../components/page-template";
3+
import PreviewCodeCard from "../components/preview-code-card";
4+
5+
import { Steppers } from "@/components/ui/steppers";
6+
import Alertdemo from "./alertdemo";
7+
import Usage from "../components/usage";
8+
import Alert02 from "./usage/alerttwo";
9+
import Alert03 from "./usage/alertthree";
10+
import Alert04 from "./usage/alertfour";
11+
12+
const page = () => {
13+
return (
14+
<div>
15+
<PageTemplate title="Animated Alert" className="mt-5">
16+
<PreviewCodeCard path="app/(docs)/docs/animatedchart/animateddemo.tsx">
17+
<Alertdemo />
18+
</PreviewCodeCard>
19+
20+
<PageSubTitle>Installation</PageSubTitle>
21+
<p className="text-gray-400">
22+
Edit tailwind.config.ts to add background grid
23+
</p>
24+
25+
<Steppers
26+
className=""
27+
installScript="npm i framer-motion lucide-react npx shadcn@latest add alert
28+
"
29+
steps={[{ title: "Create feedback component & paste the code" }]}
30+
withInstall
31+
codePath="lib/utils.ts"
32+
/>
33+
34+
<PageSubTitle>Usage</PageSubTitle>
35+
36+
<Usage path="app/(docs)/docs/alert/usage/alertthree.tsx">
37+
<Alert02 />
38+
</Usage>
39+
<Usage path="app/(docs)/docs/alert/usage/alertthree.tsx">
40+
<Alert03 />
41+
</Usage>
42+
<Usage path="app/(docs)/docs/alert/usage/alertfour.tsx">
43+
<Alert04 />
44+
</Usage>
45+
</PageTemplate>
46+
</div>
47+
);
48+
};
49+
50+
export default page;

‎app/(docs)/docs/alert/usage/alertfive.tsx

Whitespace-only changes.

‎app/(docs)/docs/alert/usage/alertfour.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
"use client";
2+
3+
import { Alert } from "@/components/ui/alert";
4+
import { cn } from "@/lib/utils";
5+
import { motion } from "framer-motion";
6+
import { CircleDollarSign } from "lucide-react";
7+
8+
export default function Alert04() {
9+
return (
10+
<motion.div
11+
initial={{ opacity: 0, y: -8 }}
12+
animate={{ opacity: 1, y: 0 }}
13+
className="w-full max-w-md mx-auto"
14+
>
15+
<Alert
16+
className={cn(
17+
"relative overflow-hidden",
18+
"bg-white dark:bg-zinc-900",
19+
"border border-emerald-100 dark:border-emerald-900/50",
20+
"shadow-sm",
21+
"p-4 rounded-xl"
22+
)}
23+
>
24+
<div className="flex items-center gap-4">
25+
<motion.div
26+
initial={{ scale: 0.5 }}
27+
animate={{ scale: 1 }}
28+
className="flex-shrink-0"
29+
>
30+
<div
31+
className={cn(
32+
"w-10 h-10 rounded-full",
33+
"bg-emerald-50 dark:bg-emerald-950/50",
34+
"flex items-center justify-center",
35+
"ring-8 ring-emerald-50/50 dark:ring-emerald-950/25"
36+
)}
37+
>
38+
<CircleDollarSign className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
39+
</div>
40+
</motion.div>
41+
42+
<div className="flex-1 min-w-0">
43+
<motion.div
44+
initial={{ opacity: 0, x: 10 }}
45+
animate={{ opacity: 1, x: 0 }}
46+
className="space-y-1"
47+
>
48+
<div className="flex items-center gap-2">
49+
<h3 className="text-base font-medium text-emerald-900 dark:text-emerald-100">
50+
You got paid!
51+
</h3>
52+
<span className="px-1.5 py-0.5 rounded-md text-xs font-medium bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300">
53+
$2,400.00
54+
</span>
55+
</div>
56+
<p className="text-sm text-emerald-600 dark:text-emerald-400">
57+
The payment has been processed and added to your
58+
account
59+
</p>
60+
</motion.div>
61+
</div>
62+
</div>
63+
64+
<div className="absolute inset-0 pointer-events-none">
65+
<div className="absolute -left-2 -top-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50" />
66+
<div className="absolute -right-2 -bottom-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50" />
67+
</div>
68+
</Alert>
69+
</motion.div>
70+
);
71+
}

‎app/(docs)/docs/alert/usage/alertthree.tsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
"use client";
2+
3+
import { CheckCircle2 } from "lucide-react";
4+
import { motion } from "framer-motion";
5+
6+
export default function Alert03() {
7+
return (
8+
<motion.div
9+
initial={{ opacity: 0, y: -8 }}
10+
animate={{ opacity: 1, y: 0 }}
11+
className="w-full max-w-sm mx-auto"
12+
>
13+
<div className="relative overflow-hidden rounded-lg border border-emerald-200/30 bg-emerald-50/50 dark:bg-emerald-950/20 dark:border-emerald-800/30 p-4 shadow-sm">
14+
<div className="flex items-center gap-3">
15+
<motion.div
16+
initial={{ scale: 0.5 }}
17+
animate={{ scale: 1 }}
18+
transition={{
19+
type: "spring",
20+
stiffness: 300,
21+
damping: 20,
22+
}}
23+
>
24+
<div className="rounded-full bg-emerald-100 dark:bg-emerald-900/50 p-1">
25+
<CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
26+
</div>
27+
</motion.div>
28+
<motion.p
29+
initial={{ opacity: 0, x: 10 }}
30+
animate={{ opacity: 1, x: 0 }}
31+
transition={{ delay: 0.1 }}
32+
className="text-sm font-medium text-emerald-800 dark:text-emerald-200"
33+
>
34+
Saved to database
35+
</motion.p>
36+
</div>
37+
38+
<motion.div
39+
initial={{ x: "-100%" }}
40+
animate={{ x: "100%" }}
41+
transition={{ duration: 1, delay: 0.2 }}
42+
className="absolute inset-0 z-10 pointer-events-none bg-gradient-to-r from-transparent via-white/20 to-transparent"
43+
/>
44+
</div>
45+
</motion.div>
46+
);
47+
}

‎app/(docs)/docs/alert/usage/alerttwo.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Alert } from "@/components/ui/alert";
2+
import { Button } from "@/components/ui/button";
3+
import { cn } from "@/lib/utils";
4+
import { Check, X } from "lucide-react";
5+
import Image from "next/image";
6+
7+
export default function Alert02() {
8+
return (
9+
<div className="w-full max-w-xl mx-auto">
10+
<Alert className="relative bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 shadow-[0_1px_6px_0_rgba(0,0,0,0.02)] rounded-xl p-4">
11+
<div className="flex items-center gap-4">
12+
<div className="relative h-10 w-10 flex-shrink-0">
13+
<Image
14+
src="https://img.freepik.com/premium-photo/anime-male-avatar_950633-956.jpg"
15+
alt="Arihant jain"
16+
fill
17+
className="rounded-full object-cover"
18+
/>
19+
<div className="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full bg-green-500 ring-2 ring-white dark:ring-zinc-950" />
20+
</div>
21+
22+
<div className="flex-1 min-w-0">
23+
<div className="flex items-center justify-between gap-4">
24+
<div>
25+
<p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
26+
Team Invitation
27+
</p>
28+
<p className="text-[13px] text-zinc-500 dark:text-zinc-400 mt-0.5">
29+
Arihant invited you to join{" "}
30+
<span className="font-medium text-zinc-700 dark:text-zinc-300">
31+
Design Team
32+
</span>
33+
</p>
34+
</div>
35+
</div>
36+
</div>
37+
38+
{/* Actions */}
39+
<div className="flex items-center gap-2">
40+
<Button
41+
size="sm"
42+
variant="ghost"
43+
className="h-8 w-8 p-0 hover:bg-red-50 dark:hover:bg-red-950/50 text-zinc-400 hover:text-red-600 dark:text-zinc-500 dark:hover:text-red-400 transition-colors"
44+
>
45+
<X className="h-4 w-4" />
46+
</Button>
47+
<Button
48+
size="sm"
49+
variant="ghost"
50+
className={cn(
51+
"h-8 w-8 p-0",
52+
"hover:bg-emerald-50 dark:hover:bg-emerald-950/50",
53+
"text-zinc-400 hover:text-emerald-600",
54+
"dark:text-zinc-500 dark:hover:text-emerald-400",
55+
"transition-colors"
56+
)}
57+
>
58+
<Check className="h-4 w-4" />
59+
</Button>
60+
</div>
61+
</div>
62+
63+
<div className="mt-2 ml-14">
64+
<p className="text-[12px] text-zinc-400 dark:text-zinc-500">
65+
Invited 5 minutes ago
66+
</p>
67+
</div>
68+
</Alert>
69+
</div>
70+
);
71+
}

‎app/(docs)/docs/animatedchart/animateddemo.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
5+
export const Chart = () => (
6+
<div
7+
className={
8+
'dark:shadow-none shadow-xl overflow-hidden rounded-lg border dark:border-neutral-800 border-neutral-300 w-[300px]'
9+
}
10+
>
11+
<div className={'absolute p-4 dark:text-neutral-100 text-neutral-900'}>
12+
<div className={'font-medium'}>This Month:</div>
13+
<div className={'font-bold text-3xl'}>+112%</div>
14+
</div>
15+
<div className={'dark:bg-neutral-950 bg-white dark:bg-grid-neutral-700 bg-grid-neutral-200'}>
16+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 653 465">
17+
<motion.path
18+
transition={{ delay: 0.3 }}
19+
initial={{ opacity: 0 }}
20+
animate={{ opacity: 1 }}
21+
d="M0 460.694c6.6-3.13 19.8-11.272 33-15.654s19.8-2.814 33-6.257 19.8.365 33-10.955 19.8-32.07 33-45.643c13.2-13.572 19.8-16.08 33-22.22s19.8-5.647 33-8.48c13.2-2.832 19.8 5.901 33-5.68 13.2-11.582 19.8-37.759 33-52.226 13.2-14.468 19.8-28.263 33-20.112 13.2 8.15 19.8 59.038 33 60.863 13.2 1.824 19.8-43.269 33-51.741s19.8 24.488 33 9.38c13.2-15.11 19.8-81.825 33-84.923s19.8 54.76 33 69.432 19.8 34.912 33 3.931 19.8-148.752 33-158.837c13.2-10.086 19.8 111.943 33 108.409 13.2-3.535 19.8-97.635 33-126.082s19.8-7.562 33-16.152 26.4-21.438 33-26.798L653 465H0Z"
22+
className={'dark:fill-green-600 fill-purple-200'}
23+
/>
24+
<motion.path
25+
transition={{ duration: 0.4 }}
26+
initial={{ pathLength: 0 }}
27+
animate={{ pathLength: 1 }}
28+
d="M0 460.694c6.6-3.13 19.8-11.272 33-15.654s19.8-2.814 33-6.257 19.8.365 33-10.955 19.8-32.07 33-45.643c13.2-13.572 19.8-16.08 33-22.22s19.8-5.647 33-8.48c13.2-2.832 19.8 5.901 33-5.68 13.2-11.582 19.8-37.759 33-52.226 13.2-14.468 19.8-28.263 33-20.112 13.2 8.15 19.8 59.038 33 60.863 13.2 1.824 19.8-43.269 33-51.741s19.8 24.488 33 9.38c13.2-15.11 19.8-81.825 33-84.923s19.8 54.76 33 69.432 19.8 34.912 33 3.931 19.8-148.752 33-158.837c13.2-10.086 19.8 111.943 33 108.409 13.2-3.535 19.8-97.635 33-126.082s19.8-7.562 33-16.152 26.4-21.438 33-26.798"
29+
fill="none"
30+
className={'dark:stroke-green-300 stroke-purple-500'}
31+
strokeWidth="4"
32+
/>
33+
</svg>
34+
</div>
35+
</div>
36+
)

0 commit comments

Comments
 (0)