danvics/telegram-files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚸 feat: Add a return to home button to the Header component.

Browse source
This commit is contained in:
jarvis2f 2025-01-08 17:36:20 +08:00
parent e959062a5e
commit ad39f0dd09
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/components/header.tsx
View file

@ -13,6 +13,7 @@ import {
ChevronsLeftRightEllipsisIcon, ChevronsLeftRightEllipsisIcon,
CloudDownloadIcon, CloudDownloadIcon,
Ellipsis, Ellipsis,
Home,
UnplugIcon, UnplugIcon,
} from "lucide-react"; } from "lucide-react";
import { import {
@ -32,7 +33,7 @@ import TelegramIcon from "@/components/telegram-icon";
import AutoDownloadDialog from "@/components/auto-download-dialog"; import AutoDownloadDialog from "@/components/auto-download-dialog";
import useIsMobile from "@/hooks/use-is-mobile"; import useIsMobile from "@/hooks/use-is-mobile";
import { useState } from "react"; import { useState } from "react";
import {Button} from "@/components/ui/button"; import { Button } from "@/components/ui/button";
export function Header() { export function Header() {
const { isLoading, getAccounts, accountId, account, handleAccountChange } = const { isLoading, getAccounts, accountId, account, handleAccountChange } =
@ -46,7 +47,7 @@ export function Header() {
<Card className="mb-6"> <Card className="mb-6">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="relative flex flex-col items-start justify-between gap-4 md:flex-row md:items-center"> <div className="relative flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
<div className="w-full flex flex-1 flex-col gap-4 md:flex-row md:items-center"> <div className="flex w-full flex-1 flex-col gap-4 md:flex-row md:items-center">
<Link href={"/"} className="hidden md:inline-flex"> <Link href={"/"} className="hidden md:inline-flex">
<TelegramIcon className="h-6 w-6" /> <TelegramIcon className="h-6 w-6" />
</Link> </Link>
@ -111,7 +112,6 @@ export function Header() {
<AutoDownloadDialog /> <AutoDownloadDialog />
</> </>
)} )}
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
@ -158,11 +158,20 @@ export function Header() {
<SettingsDialog /> <SettingsDialog />
</div> </div>
<Button
size="xs"
variant="ghost"
onClick={() => (location.href = "/")}
className="absolute bottom-[0.3rem] right-10 md:hidden"
>
<Home className="h-4 w-4" />
</Button>
<Button <Button
size="xs" size="xs"
variant="ghost" variant="ghost"
onClick={() => setShowMore(!showMore)} onClick={() => setShowMore(!showMore)}
className="absolute bottom-0 right-0 md:hidden" className="absolute bottom-[0.3rem] right-0 md:hidden"
> >
<Ellipsis className="h-4 w-4" /> <Ellipsis className="h-4 w-4" />
</Button> </Button>