Files
reui-blocks/blocks/download13.tsx
T

105 lines
3.6 KiB
TypeScript

"use client";
import { ArrowRight, Check, Copy, Download } from "lucide-react";
import { useState } from "react";
import { FaWindows } from "react-icons/fa";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Download13Props {
className?: string;
}
const Download13 = ({ className }: Download13Props) => {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText("winget install Example.App");
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
<div className="container">
<span className="mx-auto grid size-28 place-items-center rounded-4xl bg-primary p-4 md:size-32">
<img
src="/block-media/shadcnblocks/block/block-1.svg"
alt="لوگو"
className="size-16 invert dark:invert-0"
/>
</span>
<h1 className="mt-10 text-center text-xl font-semibold md:text-2xll">
دانلود اپلیکیشن دسکتاپ
</h1>
<p className="mx-auto mt-4 max-w-5xl text-center text-muted-foreground md:mt-6 md:text-xl">
با نسخه دسکتاپ، بهره‌وری بی‌درنگ را تجربه کنید. به‌روزرسانی خودکار و پشتیبانی چندپلتفرمی در چند دقیقه شروع کنید.
</p>
<div className="mt-10 flex flex-col items-center gap-4 md:mt-20">
<FaWindows className="size-14" />
<Button className="inline-flex items-center gap-2">
دانلود برای <span dir="rtl">Windows</span>
<Download />
</Button>
<div
className="flex items-center gap-1.5 rounded-lg border py-1 ps-4 pe-2"
dir="rtl"
>
<span className="font-mono text-sm">
winget install Example.App
</span>
<Button
variant="link"
size="icon"
onClick={handleCopy}
className="relative"
>
<span
className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
copied
? "scale-75 opacity-0 blur-xs"
: "blur-0 scale-100 opacity-100"
}`}
>
<Copy />
</span>
<span
className={`absolute inset-0 grid place-items-center transition-all duration-250 ${
copied
? "blur-0 scale-100 opacity-100"
: "scale-75 opacity-0 blur-xs"
}`}
>
<Check className="text-emerald-600" />
</span>
</Button>
</div>
<a
href="#"
className="flex items-center gap-1 text-xs text-muted-foreground hover:underline"
>
روش‌های نصب دیگر
<ArrowRight className="size-3 rtl:rotate-180" />
</a>
<div className="mt-10 flex flex-col items-center gap-2 md:mt-20">
<p className="text-sm font-medium text-muted-foreground">
همه دانلودهای ویندوز:
</p>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" dir="rtl">
x64
</Button>
<Button variant="outline" size="sm" dir="rtl">
Arm64
</Button>
</div>
</div>
</div>
</div>
</section>
);
};
export { Download13 };