mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-18 16:28:26 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix broken header layout on mobile

Browse source
This commit is contained in:
miloschwartz 2025-03-23 12:37:57 -04:00
parent aabdcea3c0
commit 013f342ff6
No known key found for this signature in database
3 changed files with 98 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/Header.tsx
View file

@ -43,13 +43,7 @@ export function Header({ orgId, orgs }: HeaderProps) {
return ( return (
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <ProfileIcon />
<ProfileIcon />
<div className="hidden md:block">
<SupporterStatus />
</div>
</div>
<div className="flex items-center"> <div className="flex items-center">
<div className="hidden md:block"> <div className="hidden md:block">

6
src/components/ProfileIcon.tsx
View file

@ -13,7 +13,7 @@ import {
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { useEnvContext } from "@app/hooks/useEnvContext"; import { useEnvContext } from "@app/hooks/useEnvContext";
import { toast } from "@app/hooks/useToast"; import { toast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/api";; import { formatAxiosError } from "@app/lib/api";
import { Laptop, LogOut, Moon, Sun } from "lucide-react"; import { Laptop, LogOut, Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
@ -21,6 +21,7 @@ import { useState } from "react";
import { useUserContext } from "@app/hooks/useUserContext"; import { useUserContext } from "@app/hooks/useUserContext";
import Disable2FaForm from "./Disable2FaForm"; import Disable2FaForm from "./Disable2FaForm";
import Enable2FaForm from "./Enable2FaForm"; import Enable2FaForm from "./Enable2FaForm";
import SupporterStatus from "./SupporterStatus";
export default function ProfileIcon() { export default function ProfileIcon() {
const { setTheme, theme } = useTheme(); const { setTheme, theme } = useTheme();
@ -152,6 +153,9 @@ export default function ProfileIcon() {
<span className="truncate max-w-full font-medium min-w-0 mr-1"> <span className="truncate max-w-full font-medium min-w-0 mr-1">
{user.email} {user.email}
</span> </span>
<div className="hidden md:block">
<SupporterStatus />
</div>
</div> </div>
</> </>
); );

181
src/components/SupporterStatus.tsx
View file

@ -176,82 +176,39 @@ export default function SupporterStatus() {
</Link> </Link>
</p> </p>
<p>Please select the option that best suits you.</p> <div className="py-6">
<p className="mb-3 text-center">Please select the option that best suits you.</p>
<div className="grid md:grid-cols-2 grid-cols-1 gap-8"> <div className="grid md:grid-cols-2 grid-cols-1 gap-8">
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Full Supporter</CardTitle> <CardTitle>Full Supporter</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-4xl mb-6">$95</p> <p className="text-4xl mb-6">$95</p>
<ul className="space-y-3"> <ul className="space-y-3">
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" /> <Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground"> <span className="text-muted-foreground">
For the whole server For the whole server
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" /> <Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Lifetime purchase Lifetime purchase
</span> </span>
</li> </li>
<li className="flex items-center gap-2"> <li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" /> <Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground"> <span className="text-muted-foreground">
Supporter status Supporter status
</span> </span>
</li> </li>
</ul> </ul>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Link
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=474929"
target="_blank"
rel="noopener noreferrer"
className="w-full"
>
<Button className="w-full">Buy</Button>
</Link>
</CardFooter>
</Card>
<Card
className={`${supporterStatus?.tier === "Limited Supporter" ? "opacity-50" : ""}`}
>
<CardHeader>
<CardTitle>Limited Supporter</CardTitle>
</CardHeader>
<CardContent>
<p className="text-4xl mb-6">$25</p>
<ul className="space-y-3">
<li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
For 5 or less users
</span>
</li>
<li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
Lifetime purchase
</span>
</li>
<li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
Supporter status
</span>
</li>
</ul>
</CardContent>
<CardFooter>
{supporterStatus?.tier !==
"Limited Supporter" ? (
<Link <Link
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=463100" href="https://github.com/sponsors/fosrl/sponsorships?tier_id=474929"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="w-full" className="w-full"
@ -260,22 +217,68 @@ export default function SupporterStatus() {
Buy Buy
</Button> </Button>
</Link> </Link>
) : ( </CardFooter>
<Button </Card>
className="w-full"
disabled={ <Card
supporterStatus?.tier === className={`${supporterStatus?.tier === "Limited Supporter" ? "opacity-50" : ""}`}
"Limited Supporter" >
} <CardHeader>
> <CardTitle>Limited Supporter</CardTitle>
Buy </CardHeader>
</Button> <CardContent>
)} <p className="text-4xl mb-6">$25</p>
</CardFooter> <ul className="space-y-3">
</Card> <li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
For 5 or less users
</span>
</li>
<li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
Lifetime purchase
</span>
</li>
<li className="flex items-center gap-2">
<Check className="h-6 w-6 text-green-500" />
<span className="text-muted-foreground">
Supporter status
</span>
</li>
</ul>
</CardContent>
<CardFooter>
{supporterStatus?.tier !==
"Limited Supporter" ? (
<Link
href="https://github.com/sponsors/fosrl/sponsorships?tier_id=463100"
target="_blank"
rel="noopener noreferrer"
className="w-full"
>
<Button className="w-full">
Buy
</Button>
</Link>
) : (
<Button
className="w-full"
disabled={
supporterStatus?.tier ===
"Limited Supporter"
}
>
Buy
</Button>
)}
</CardFooter>
</Card>
</div>
</div> </div>
<div className="w-full pt-6 space-y-2"> <div className="w-full space-y-2">
<Button <Button
className="w-full" className="w-full"
variant="outlinePrimary" variant="outlinePrimary"