TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #16 from Code-Victor/feat/update-profile-ui

Browse Source 
Feat/update profile UI
This commit is contained in:
James Murdza 2025-01-08 09:07:35 -08:00 committed by GitHub
commit 960a104011
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 91 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/assets/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 29 KiB

9
frontend/components/dashboard/navbar/index.tsx
View File

@ -9,14 +9,19 @@ import DashboardNavbarSearch from "./search"
export default function DashboardNavbar({ userData }: { userData: User }) {
return (
<div className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<Link
href="/"
className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
>
<Image src={Logo} alt="Logo" width={36} height={36} />
</Link>
<div className="text-sm font-medium flex items-center">Sandbox</div>
<h1 className="text-xl">
<span className="font-semibold">Sandbox</span>{" "}
<span className="text-xs font-medium text-muted-foreground">
by gitwit
</span>
</h1>
</div>
<div className="flex items-center space-x-4">
<DashboardNavbarSearch />

119
frontend/components/profile/index.tsx
View File

@ -218,28 +218,69 @@ function ProfileCard({
</TooltipProvider>
</div>
)}
<CardContent className="flex flex-col gap-4 items-center pt-6">
<Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
<CardContent className="flex flex-col gap-4 pt-6">
{isEditing ? (
<EditProfileForm
{...{
name,
username,
avatarUrl,
bio,
personalWebsite,
socialLinks,
toggleEdit,
}}
/>
<div className="flex flex-col gap-2 items-center ">
<Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
<EditProfileForm
{...{
name,
username,
avatarUrl,
bio,
personalWebsite,
socialLinks,
toggleEdit,
}}
/>
</div>
) : (
<div className="flex flex-col gap-2.5 items-center">
<div className="space-y-1.5">
<div className="">
<>
<div className="flex flex-col gap-2 items-center">
<Avatar name={name} avatarUrl={avatarUrl} className="size-36" />
<div className="space-y-1">
<CardTitle className="text-2xl text-center">{name}</CardTitle>
<CardDescription className="text-center">{`@${username}`}</CardDescription>
</div>
{bio && <p className="text-sm text-center">{bio}</p>}
{(socialLinks.length > 0 || personalWebsite) && (
<div className="flex gap-2 justify-center">
{personalWebsite && (
<Button variant="secondary" size="smIcon" asChild>
<a
href={personalWebsite}
target="_blank"
rel="noopener noreferrer"
>
<Globe className="size-4" />
<span className="sr-only">Personal Website</span>
</a>
</Button>
)}
{socialLinks.map((link, index) => {
const Icon = socialIcons[link.platform]
return (
<Button
key={index}
variant="secondary"
size="smIcon"
asChild
>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
>
<Icon className="size-4" />
<span className="sr-only">{link.platform}</span>
</a>
</Button>
)
})}
</div>
)}
</div>
<div className="flex flex-col gap-1 items-center">
{typeof generations === "number" && (
<div className="flex justify-center">
<SubscriptionBadge
@ -248,47 +289,15 @@ function ProfileCard({
/>
</div>
)}
</div>
<div className="flex gap-4">
<StatsItem icon={Package2} label={stats.sandboxes} />
<StatsItem icon={Heart} label={stats.likes} />
</div>
{bio && <p className="text-sm text-center">{bio}</p>}
{(socialLinks.length > 0 || personalWebsite) && (
<div className="flex gap-2 justify-center">
{personalWebsite && (
<Button variant="ghost" size="smIcon" asChild>
<a
href={personalWebsite}
target="_blank"
rel="noopener noreferrer"
>
<Globe className="size-4" />
<span className="sr-only">Personal Website</span>
</a>
</Button>
)}
{socialLinks.map((link, index) => {
const Icon = socialIcons[link.platform]
return (
<Button key={index} variant="ghost" size="smIcon" asChild>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
>
<Icon className="size-4" />
<span className="sr-only">{link.platform}</span>
</a>
</Button>
)
})}
<div className="flex gap-4">
<StatsItem icon={Package2} label={stats.sandboxes} />
<StatsItem icon={Heart} label={stats.likes} />
</div>
)}
</div>
<p className="text-xs mt-2 text-muted-foreground text-center">
{joinedAt}
</p>
</div>
</>
)}
</CardContent>
</Card>
@ -713,7 +722,7 @@ const SubscriptionBadge = ({
</Badge>
<HoverCard>
<HoverCardTrigger>
<Button variant="ghost" size="smIcon">
<Button variant="ghost" size="smIcon" className="size-[26px]">
<Info size={16} />
</Button>
</HoverCardTrigger>

9
frontend/components/profile/navbar.tsx
View File

@ -9,14 +9,19 @@ import { Button } from "../ui/button"
export default function ProfileNavbar({ userData }: { userData: User }) {
return (
<nav className=" py-2 px-4 w-full flex items-center justify-between border-b border-border">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<Link
href="/"
className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
>
<Image src={Logo} alt="Logo" width={36} height={36} />
</Link>
<div className="text-sm font-medium flex items-center">Sandbox</div>
<h1 className="text-xl">
<span className="font-semibold">Sandbox</span>{" "}
<span className="text-xs font-medium text-muted-foreground">
by gitwit
</span>
</h1>
</div>
<div className="flex items-center space-x-4">
<ThemeSwitcher />

2
frontend/components/ui/button.tsx
View File

@ -26,7 +26,7 @@ const buttonVariants = cva(
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
smIcon: "h-8 w-8",
smIcon: "size-8",
},
},
defaultVariants: {