+2 -10

app/(home)/premium/page.tsx

reviewed

··· 10 10 import { getUser } from "@/lib/discord/user"; 11 11 import BotStylePic from "@/public/docs-assets/bot-style.webp"; 12 12 import NotificationsStylePic from "@/public/docs-assets/notifications-style.webp"; 13 13 - import ArrowPic from "@/public/icons/arroww.webp"; 14 13 import type { ApiV1TopguildsGetResponse } from "@/typings"; 15 14 import { cn } from "@/utils/cn"; 16 15 import { getBaseUrl, getCanonicalUrl } from "@/utils/urls"; 17 16 import type { Metadata } from "next"; 18 18 - import { Montserrat, Patrick_Hand } from "next/font/google"; 17 17 + import { Montserrat } from "next/font/google"; 19 18 import Image from "next/image"; 20 19 import Link from "next/link"; 21 20 import { BsQuestionLg } from "react-icons/bs"; ··· 25 24 import { Subscribe } from "./subscribe.component"; 26 25 27 26 const montserrat = Montserrat({ subsets: ["latin"] }); 28 28 - const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" }); 29 27 30 28 const bots = ["1125449347451068437", "985213199248924722", "1097907896987160666"].map((userId) => getUser(userId)); 31 29 ··· 168 166 ))} 169 167 170 168 <div className="hidden md:flex items-center pt-4"> 171 171 - <div className="w-1/2 text-sm text-neutral-400 flex justify-between pr-4"> 172 172 - <div /> 173 173 - <div className={cn("text-medium text-neutral-500 font-medium rotate-2 flex items-center gap-1 mt-4", handwritten.className)}> 174 174 - extra monthly donation 175 175 - <Image src={ArrowPic} width={24} height={24} alt="arrow up" className="size-5 -scale-x-100 mb-1.5 rotate-6" draggable={false} /> 176 176 - </div> 177 177 - </div> 169 169 + <div className="w-1/2" /> 178 170 <div className="flex w-1/2 gap-4"> 179 171 <Subscribe /> 180 172 </div>

+20 -8

app/(home)/premium/subscribe.component.tsx

reviewed

··· 2 2 import { userStore } from "@/common/user"; 3 3 import { Button } from "@/components/ui/button"; 4 4 import { InputBase, InputBaseAdornment, InputBaseAdornmentButton, InputBaseControl, InputBaseInput } from "@/components/ui/input-base"; 5 5 + import { Separator } from "@/components/ui/separator"; 5 6 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; 6 7 import { cn } from "@/utils/cn"; 7 8 import Link from "next/link"; ··· 30 31 } 31 32 32 33 return ( 33 33 - <div className="w-full flex gap-2"> 34 34 - <DonationSelect 35 35 - className="w-[164px] md:w-40 shrink-0" 36 36 - donation={donation} 37 37 - setDonation={setDonation} 38 38 - /> 39 39 - 40 40 - <div className="w-full relative overflow-hidden rounded-lg border border-border group p-px"> 34 34 + <div className="w-full"> 35 35 + <div className="w-full relative overflow-hidden rounded-lg border border-border group p-px h-fit"> 41 36 <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] bg-[conic-gradient(from_90deg_at_0%_50%,#8b5cf6_50%,hsl(var(--input)/30)_7%)]" /> 42 37 <Button 43 38 asChild ··· 51 46 Subscribe 52 47 </Link> 53 48 </Button> 49 49 + </div> 50 50 + 51 51 + <div className="relative w-full gap-2 h-3"> 52 52 + <Separator className="w-full mt-4" /> 53 53 + <span className="absolute bg-[#0d0d0d] px-2 -top-1.5 left-1/2 -translate-x-1/2 text-muted-foreground font-medium text-xs uppercase">choose what to pay</span> 54 54 + </div> 55 55 + 56 56 + <div className="flex gap-1 w-full mt-2"> 57 57 + {[4, 8, 12, 18, 25].map((amount) => ( 58 58 + <Button 59 59 + key={amount} 60 60 + className={cn("h-7 w-1/5", amount === (donation + 4) && "bg-violet-400/20 hover:bg-violet-400/40")} 61 61 + onClick={() => setDonation(amount - 4)} 62 62 + > 63 63 + {amount}€ 64 64 + </Button> 65 65 + ))} 54 66 </div> 55 67 </div> 56 68 );