terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply figma browse mobile redesign

Browse Source
This commit is contained in:
TerryM
2026-05-28 10:36:38 +08:00
parent 3825c4ec2f
commit 49f61b89f1
26 changed files with 401 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/messageStream/AttachmentDownloadPill.tsx
View File

@@ -1,4 +1,5 @@
import { ArrowDownToLine, LoaderCircle } from "lucide-react";
import { LoaderCircle } from "lucide-react";
import { DownloadCloudIcon } from "../icons/DownloadCloudIcon";
import { useState, type MouseEvent } from "react";
import { useI18n } from "../../i18n";
import type { Attachment } from "../../types/post";
@@ -35,20 +36,23 @@ export function AttachmentDownloadPill({
type="button"
onClick={handleDownload}
disabled={isDownloading}
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-[10px] text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait ${className}`}
className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 text-[11px] text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}
aria-label={
isDownloading ? t("downloading") : `Download ${attachment.filename}`
}
aria-busy={isDownloading}
>
<span className="flex h-6 w-6 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
<span className="flex h-6 w-6 items-center justify-center bg-[#545454]/50 transition group-hover:bg-[#545454]/70">
{isDownloading ? (
<LoaderCircle className="h-3 w-3 animate-spin" strokeWidth={2.3} />
<LoaderCircle
className="h-3.5 w-3.5 animate-spin"
strokeWidth={2.3}
/>
) : (
<ArrowDownToLine className="h-3 w-3" strokeWidth={2.3} />
<DownloadCloudIcon className="h-3.5 w-3.5" />
)}
</span>
<span className="flex h-6 items-center gap-0.5 px-1.5">
<span className="flex h-6 items-center gap-0.5 px-2">
{isDownloading ? (
t("downloading")
) : (