Skip to content

Commit d6d2784

Browse files
BetrixDevBetrixDev
committed
update top-nav
1 parent 388d990 commit d6d2784

File tree

1 file changed

+12
-177
lines changed

1 file changed

+12
-177
lines changed

‎app/components/top-nav.tsx‎

Lines changed: 12 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -45,169 +45,6 @@ type TopNavProps = {
4545
};
4646

4747
export default function TopNav({ showTierPill = true }: TopNavProps) {
48-
const { user } = useUser();
49-
50-
const accountTier = safeParseAccountTier(user?.publicMetadata?.accountTier);
51-
52-
return <NewTopNav />;
53-
54-
return (
55-
<div className="sticky md:top-2 flex justify-center z-[99] w-full">
56-
<header className="px-3 max-w-[64rem] md:w-[90%] w-full bg-white/95 md:dark:bg-zinc-950/30 dark:bg-zinc-950/50 md:border border-border/50 border-b md:rounded-full flex items-center justify-between h-14 reltive backdrop-blur-md shadow-sm sticky">
57-
<Link className="flex items-center" to="/" preload="intent">
58-
<Button
59-
variant="ghost"
60-
className="flex-shrink-0 flex items-center rounded-full z-50"
61-
>
62-
<Video className="h-8 w-8 text-red-500" />
63-
<span className="ml-2 text-lg z-10 hidden md:inline md:text-2xl font-bold pointer-events-none">
64-
Slipstream
65-
</span>
66-
</Button>
67-
</Link>
68-
<div className="absolute w-full">
69-
<nav className="hidden sm:flex mx-auto justify-center gap-4 sm:gap-6">
70-
<Link
71-
className="text-sm font-medium hover:underline underline-offset-4"
72-
to="/pricing"
73-
preload="intent"
74-
>
75-
Pricing
76-
</Link>
77-
<Link
78-
className="text-sm font-medium hover:underline underline-offset-4"
79-
to="/videos"
80-
preload="intent"
81-
>
82-
Your Videos
83-
</Link>
84-
<a
85-
className="text-sm font-medium hover:underline underline-offset-4"
86-
href="mailto:[email protected]"
87-
target="_blank"
88-
rel="noreferrer"
89-
>
90-
Support
91-
</a>
92-
</nav>
93-
<div className="flex justify-center sm:hidden">
94-
<DropdownMenu>
95-
<DropdownMenuTrigger asChild>
96-
<Button variant="outline" className="rounded-full">
97-
Navigate
98-
</Button>
99-
</DropdownMenuTrigger>
100-
<DropdownMenuContent className="z-[99]">
101-
<DropdownMenuItem>
102-
<Link
103-
className="text-sm font-medium hover:underline underline-offset-4"
104-
to="/"
105-
preload="intent"
106-
>
107-
Home
108-
</Link>
109-
</DropdownMenuItem>
110-
<DropdownMenuItem>
111-
<Link
112-
className="text-sm font-medium hover:underline underline-offset-4"
113-
to="/pricing"
114-
preload="intent"
115-
>
116-
Pricing
117-
</Link>
118-
</DropdownMenuItem>
119-
<DropdownMenuItem>
120-
<Link
121-
className="text-sm font-medium hover:underline underline-offset-4"
122-
to="/videos"
123-
preload="intent"
124-
>
125-
Your Videos
126-
</Link>
127-
</DropdownMenuItem>
128-
<DropdownMenuItem>
129-
<a
130-
className="text-sm font-medium hover:underline underline-offset-4"
131-
href="mailto:[email protected]"
132-
>
133-
Support
134-
</a>
135-
</DropdownMenuItem>
136-
</DropdownMenuContent>
137-
</DropdownMenu>
138-
</div>
139-
</div>
140-
<SignedOut>
141-
<DropdownMenu>
142-
<DropdownMenuTrigger asChild>
143-
<Button
144-
variant="outline"
145-
className="rounded-full md:hidden block z-50"
146-
>
147-
Account
148-
</Button>
149-
</DropdownMenuTrigger>
150-
<DropdownMenuContent className="z-[99]">
151-
<DropdownMenuItem>
152-
<Link
153-
className="text-sm font-medium hover:underline underline-offset-4"
154-
to="/sign-in/$"
155-
preload="intent"
156-
>
157-
Sign in
158-
</Link>
159-
</DropdownMenuItem>
160-
<DropdownMenuItem>
161-
<Link
162-
className="text-sm font-medium hover:underline underline-offset-4"
163-
to="/sign-up/$"
164-
preload="intent"
165-
>
166-
Sign Up
167-
</Link>
168-
</DropdownMenuItem>
169-
</DropdownMenuContent>
170-
</DropdownMenu>
171-
</SignedOut>
172-
<SignedIn>
173-
<span className="md:flex hidden items-center gap-2">
174-
{showTierPill && (
175-
<Badge variant="outline" className="h-8">
176-
<AccountTierText
177-
accountTier={accountTier}
178-
className="pointer-events-none"
179-
>
180-
{TIER_TO_TEXT[accountTier]} Tier
181-
</AccountTierText>
182-
</Badge>
183-
)}
184-
185-
<UserButton />
186-
</span>
187-
<span className="flex md:hidden items-center">
188-
<UserButton />
189-
</span>
190-
</SignedIn>
191-
<SignedOut>
192-
<div className="hidden md:flex gap-2 w-40 justify-end z-10">
193-
<Link to="/sign-in/$" preload="intent">
194-
<Button className="rounded-full" variant="ghost">
195-
Sign in
196-
</Button>
197-
</Link>
198-
<Link to="/sign-up/$" preload="intent">
199-
<Button className="rounded-full" variant="secondary">
200-
Sign Up
201-
</Button>
202-
</Link>
203-
</div>
204-
</SignedOut>
205-
</header>
206-
</div>
207-
);
208-
}
209-
210-
function NewTopNav() {
21148
const { state } = useRouter();
21249

21350
const { data: usageData } = useQuery(usageDataQueryOptions);
@@ -258,14 +95,12 @@ function NewTopNav() {
25895
<SignedOut>
25996
<div className="flex gap-2">
26097
<Link to="/sign-in/$" preload="intent">
261-
<Button variant="outline" className="rounded-full">
98+
<Button variant="outline" className="rounded-lg">
26299
Sign in
263100
</Button>
264101
</Link>
265102
<Link to="/sign-up/$" preload="intent">
266-
<Button variant="secondary" className="rounded-full">
267-
Sign Up
268-
</Button>
103+
<Button className="rounded-lg">Sign Up</Button>
269104
</Link>
270105
</div>
271106
</SignedOut>
@@ -278,11 +113,13 @@ function NewTopNav() {
278113
<p className="text-medium text-primary">
279114
{user?.username}
280115
</p>
281-
<p className="font-sm">
282-
<AccountTierText accountTier={accountTier}>
283-
{TIER_TO_TEXT[accountTier]} Tier
284-
</AccountTierText>
285-
</p>
116+
{showTierPill && (
117+
<p className="font-sm">
118+
<AccountTierText accountTier={accountTier}>
119+
{TIER_TO_TEXT[accountTier]} Tier
120+
</AccountTierText>
121+
</p>
122+
)}
286123
</div>
287124
</div>
288125

@@ -391,19 +228,17 @@ function NewTopNav() {
391228
<div className="flex items-center gap-4">
392229
<SignedOut>
393230
<Link to="/sign-in/$" preload="intent">
394-
<Button variant="outline" className="rounded-full">
231+
<Button variant="outline" className="rounded-lg">
395232
Sign in
396233
</Button>
397234
</Link>
398235
<Link to="/sign-up/$" preload="intent">
399-
<Button variant="secondary" className="rounded-full">
400-
Sign Up
401-
</Button>
236+
<Button className="rounded-lg">Sign Up</Button>
402237
</Link>
403238
</SignedOut>
404239
<SignedIn>
405240
<span className="text-sm font-medium">
406-
{true && (
241+
{showTierPill && (
407242
<Badge variant="outline" className="h-8">
408243
<AccountTierText
409244
accountTier={accountTier}

0 commit comments

Comments
 (0)