+13 -1

src/components/Nav/NavBarAuthed.tsx

··· 1 1 import { UnderlineIconRouterLink } from "@/components/Animated/UnderlineIconRouterLink"; 2 2 + import { UnderlineRouterLink } from "@/components/Animated/UnderlineRouterLink"; 2 3 import { SignOutButton } from "@/components/Auth/SignOutButton"; 3 4 import { DropdownModal } from "@/components/Dropdown/DropdownModal"; 4 5 import { StrandIcon } from "@/components/Icons/Branding/StrandIcon"; 5 6 import { Loading } from "@/components/Icons/Loading"; 7 7 + import { LucideCircleUserRound } from "@/components/Icons/LucideCircleUserRound"; 6 8 import { Avatar } from "@/components/Profile/Avatar"; 7 9 import { useModalEscapeEffect } from "@/lib/hooks/useModalEscapeEffect"; 8 10 import { useModalMousedownEffect } from "@/lib/hooks/useModalMousedownEffect"; ··· 37 39 className="pl-2 text-lg font-semibold" 38 40 /> 39 41 </div> 40 40 - <div className="flex max-h-12 items-center gap-1 mr-3"> 42 42 + <div className="mr-3 flex max-h-12 items-center gap-1"> 41 43 <div> 42 44 {isAvatarLoading ? ( 43 45 <Loading /> ··· 54 56 55 57 const AvatarWithDropdown = ({ uri }: { uri: string | undefined }) => { 56 58 const [showDropdown, setShowDropdown] = useState(false); 59 59 + const { handle } = useOAuth(); 57 60 58 61 const dropdownRef = useRef<HTMLDivElement>(null); 59 62 ··· 70 73 buttonComponent={AvatarButton} 71 74 className="bg-surface0 mt-3.5 flex w-48 flex-col gap-2 rounded-lg p-2" 72 75 > 76 76 + <UnderlineIconRouterLink 77 77 + to={`/${handle}`} 78 78 + label="Profile" 79 79 + icon={LucideCircleUserRound({})} 80 80 + className="gap-2 pl-2" 81 81 + labelClassName="text-sm text-text" 82 82 + underlineClassName="bg-text" 83 83 + iconClassName="text-text" 84 84 + /> 73 85 <SignOutButton /> 74 86 </DropdownModal> 75 87 );

+5 -5

src/routes/_layout/$identifier/$repo/index.tsx

··· 1 1 - import { createFileRoute } from '@tanstack/react-router' 1 1 + import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 - export const Route = createFileRoute('/_layout/$identifier/$repo/')({ 4 4 - component: RouteComponent, 5 5 - }) 3 3 + export const Route = createFileRoute("/_layout/$identifier/$repo/")({ 4 4 + component: RouteComponent, 5 5 + }); 6 6 7 7 function RouteComponent() { 8 8 - return <div>Hello "/_layout/$identifier/$repo/"!</div> 8 8 + return <div>Hello "/_layout/$identifier/$repo/"!</div>; 9 9 }

+6 -5

src/routes/_layout/$identifier/index.tsx

··· 1 1 - import { createFileRoute } from '@tanstack/react-router' 1 1 + import { createFileRoute } from "@tanstack/react-router"; 2 2 3 3 - export const Route = createFileRoute('/_layout/$identifier/')({ 4 4 - component: RouteComponent, 5 5 - }) 3 3 + export const Route = createFileRoute("/_layout/$identifier/")({ 4 4 + component: RouteComponent, 5 5 + }); 6 6 7 7 function RouteComponent() { 8 8 - return <div>Hello "/_layout/$identifier/"!</div> 8 8 + const { identifier } = Route.useParams(); 9 9 + return <div>{identifier}'s profile</div>; 9 10 }