Skip to content

Commit 45a463e

Browse files
parthsaliparthsali
committed
feat: update toggle mode animation & add telegram channel link
1 parent 8000418 commit 45a463e

4 files changed

Lines changed: 119 additions & 32 deletions

File tree

‎app/page.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Link from "next/link";
1010
import { ModeToggle } from "@/components/toggle-theme";
1111
import Logo from "@/components/logo";
1212
import { getBranches } from "@/lib/api/branch";
13+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
14+
import TelegramIcon from "@/components/telegram";
1315

1416
export const revalidate = 86400; // 24h ISR
1517

@@ -37,7 +39,26 @@ export default async function Home() {
3739
<span>Learnverse</span>
3840
</Link>
3941

40-
<ModeToggle />
42+
<div className="flex items-center gap-2">
43+
<TooltipProvider>
44+
<Tooltip delayDuration={0}>
45+
<TooltipTrigger asChild>
46+
<Link
47+
href="https://t.me/sppuinformationtechnology" // Replace with your actual Telegram channel link
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
className="flex h-9 w-9 items-center justify-center"
51+
>
52+
<TelegramIcon className="h-5 w-5" />
53+
<span className="sr-only">Join Telegram channel</span>
54+
</Link>
55+
</TooltipTrigger>
56+
<TooltipContent>Join Telegram channel</TooltipContent>
57+
</Tooltip>
58+
</TooltipProvider>
59+
<ModeToggle />
60+
61+
</div>
4162
</div>
4263
<div className="container max-w-4xl text-center">
4364
<h1 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">

‎components/layout/header.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { PanelLeftClose, PanelRight } from "lucide-react";
44
import { Button } from "@/components/ui/button";
55
import { cn } from "@/lib/utils";
66
import { ModeToggle } from "../toggle-theme";
7+
import TelegramIcon from "../telegram";
8+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
9+
import Link from "next/link";
710

811
interface HeaderProps {
912
isCollapsed: boolean;
@@ -33,8 +36,25 @@ export function Header({ isCollapsed, setIsCollapsed }: HeaderProps) {
3336

3437
<div className="flex-1" />
3538

36-
<div className="flex items-center gap-4">
39+
<div className="flex items-center gap-2">
40+
<TooltipProvider>
41+
<Tooltip delayDuration={0}>
42+
<TooltipTrigger asChild>
43+
<Link
44+
href="https://t.me/sppuinformationtechnology" // Replace with your actual Telegram channel link
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
className="flex h-9 w-9 items-center justify-center"
48+
>
49+
<TelegramIcon className="h-5 w-5" />
50+
<span className="sr-only">Join Telegram channel</span>
51+
</Link>
52+
</TooltipTrigger>
53+
<TooltipContent>Join Telegram channel</TooltipContent>
54+
</Tooltip>
55+
</TooltipProvider>
3756
<ModeToggle />
57+
3858
</div>
3959
</header>
4060
);

‎components/telegram.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from "react";
2+
export default function TelegramIcon(props: React.SVGProps<SVGSVGElement>) {
3+
return (
4+
<svg
5+
width="800px"
6+
height="800px"
7+
viewBox="0 0 256 256"
8+
xmlns="http://www.w3.org/2000/svg"
9+
xmlnsXlink="http://www.w3.org/1999/xlink"
10+
preserveAspectRatio="xMidYMid"
11+
{...props}
12+
>
13+
<g>
14+
<path
15+
d="M128,0 C57.307,0 0,57.307 0,128 L0,128 C0,198.693 57.307,256 128,256 L128,256 C198.693,256 256,198.693 256,128 L256,128 C256,57.307 198.693,0 128,0 L128,0 Z"
16+
fill="#40B3E0"
17+
/>
18+
<path
19+
d="M190.2826,73.6308 L167.4206,188.8978 C167.4206,188.8978 164.2236,196.8918 155.4306,193.0548 L102.6726,152.6068 L83.4886,143.3348 L51.1946,132.4628 C51.1946,132.4628 46.2386,130.7048 45.7586,126.8678 C45.2796,123.0308 51.3546,120.9528 51.3546,120.9528 L179.7306,70.5928 C179.7306,70.5928 190.2826,65.9568 190.2826,73.6308"
20+
fill="#FFFFFF"
21+
/>
22+
<path
23+
d="M98.6178,187.6035 C98.6178,187.6035 97.0778,187.4595 95.1588,181.3835 C93.2408,175.3085 83.4888,143.3345 83.4888,143.3345 L161.0258,94.0945 C161.0258,94.0945 165.5028,91.3765 165.3428,94.0945 C165.3428,94.0945 166.1418,94.5735 163.7438,96.8115 C161.3458,99.0505 102.8328,151.6475 102.8328,151.6475"
24+
fill="#D2E5F1"
25+
/>
26+
<path
27+
d="M122.9015,168.1154 L102.0335,187.1414 C102.0335,187.1414 100.4025,188.3794 98.6175,187.6034 L102.6135,152.2624"
28+
fill="#B5CFE4"
29+
/>
30+
</g>
31+
</svg>
32+
);
33+
}
34+

‎components/toggle-theme.tsx‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,52 @@
11
"use client";
22

3-
import * as React from "react";
3+
import { Button } from "@/components/ui/button";
44
import { Moon, Sun } from "lucide-react";
55
import { useTheme } from "next-themes";
6-
7-
import { Button } from "@/components/ui/button";
8-
import {
9-
DropdownMenu,
10-
DropdownMenuContent,
11-
DropdownMenuItem,
12-
DropdownMenuTrigger,
13-
} from "@/components/ui/dropdown-menu";
6+
import { motion } from "framer-motion";
147

158
export function ModeToggle() {
16-
const { setTheme } = useTheme();
9+
const { resolvedTheme, setTheme } = useTheme();
10+
11+
const isDark = resolvedTheme === "dark";
12+
13+
const handleToggle = () => {
14+
setTheme(isDark ? "light" : "dark");
15+
};
1716

1817
return (
19-
<DropdownMenu>
20-
<DropdownMenuTrigger asChild>
21-
<Button variant="outline" size="icon">
22-
<Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
23-
<Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
24-
<span className="sr-only">Toggle theme</span>
25-
</Button>
26-
</DropdownMenuTrigger>
27-
<DropdownMenuContent align="end">
28-
<DropdownMenuItem onClick={() => setTheme("light")}>
29-
Light
30-
</DropdownMenuItem>
31-
<DropdownMenuItem onClick={() => setTheme("dark")}>
32-
Dark
33-
</DropdownMenuItem>
34-
<DropdownMenuItem onClick={() => setTheme("system")}>
35-
System
36-
</DropdownMenuItem>
37-
</DropdownMenuContent>
38-
</DropdownMenu>
18+
<Button
19+
variant="ghost"
20+
size="icon"
21+
onClick={handleToggle}
22+
aria-label="Toggle theme"
23+
className="relative hover:bg-transparent dark:hover:bg-transparent"
24+
>
25+
<motion.div
26+
initial={false}
27+
animate={{
28+
rotate: isDark ? -90 : 0,
29+
scale: isDark ? 0 : 1,
30+
opacity: isDark ? 0 : 1,
31+
}}
32+
transition={{ duration: 0.3, ease: "easeInOut" }}
33+
className="absolute"
34+
>
35+
<Sun className="h-[1.2rem] w-[1.2rem]" />
36+
</motion.div>
37+
38+
<motion.div
39+
initial={false}
40+
animate={{
41+
rotate: isDark ? 0 : 90,
42+
scale: isDark ? 1 : 0,
43+
opacity: isDark ? 1 : 0,
44+
}}
45+
transition={{ duration: 0.3, ease: "easeInOut" }}
46+
className="absolute"
47+
>
48+
<Moon className="h-[1.2rem] w-[1.2rem]" />
49+
</motion.div>
50+
</Button>
3951
);
4052
}

0 commit comments

Comments
 (0)