apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-23 19:05:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: implement tab navigation in BuyMorePage and enhance button styles in BuyPagesContent and BuyTokensContent

Browse source
This commit is contained in:
Anish Sarkar 2026-05-17 23:29:41 +05:30
parent 88a43cdd65
commit 10527ddb7c
6 changed files with 114 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

50
surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx
View file

@ -4,8 +4,7 @@ import { motion } from "motion/react";
import { useState } from "react";
import { BuyPagesContent } from "@/components/settings/buy-pages-content";
import { BuyTokensContent } from "@/components/settings/buy-tokens-content";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
const TABS = [
{ id: "pages", label: "Pages" },
@ -22,29 +21,34 @@ export default function BuyMorePage() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="w-full select-none space-y-6"
className="w-full select-none"
>
<div className="flex items-center justify-center rounded-lg border bg-muted/30 p-1">
{TABS.map((tab) => (
<Button
key={tab.id}
type="button"
variant="ghost"
size="sm"
onClick={() => setActiveTab(tab.id)}
className={cn(
"h-auto flex-1 px-3 py-1.5 text-sm",
activeTab === tab.id
? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-accent-foreground"
)}
>
{tab.label}
</Button>
))}
</div>
<Tabs
value={activeTab}
onValueChange={(value) => {
setActiveTab(value as TabId);
}}
className="relative min-h-[37rem] w-full"
>
<TabsList className="absolute top-20 left-1/2 -translate-x-1/2 rounded-xl bg-accent p-1">
{TABS.map((tab) => (
<TabsTrigger
key={tab.id}
value={tab.id}
className="h-8 rounded-lg px-4 text-sm font-semibold text-accent-foreground transition-colors hover:bg-transparent hover:text-white data-[state=active]:bg-[#4a4a4a] data-[state=active]:text-white data-[state=active]:shadow-none"
>
{tab.label}
</TabsTrigger>
))}
</TabsList>
{activeTab === "pages" ? <BuyPagesContent /> : <BuyTokensContent />}
<TabsContent value="pages" className="mt-0 flex min-h-[37rem] items-center pt-14">
<BuyPagesContent />
</TabsContent>
<TabsContent value="tokens" className="mt-0 flex min-h-[37rem] items-center pt-14">
<BuyTokensContent />
</TabsContent>
</Tabs>
</motion.div>
);
}

10
surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx
View file

@ -1,17 +1,11 @@
"use client";
import { motion } from "motion/react";
import { MorePagesContent } from "@/components/settings/more-pages-content";
export default function MorePagesPage() {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="w-full select-none space-y-6"
>
<div className="w-full select-none space-y-6">
<MorePagesContent />
</motion.div>
</div>
);
}