Skip to content

Commit e71c248

Browse files
zcesurzcesur
committed
add header component
1 parent 66b3985 commit e71c248

File tree

2 files changed

+122
-111
lines changed

2 files changed

+122
-111
lines changed

‎lib/algora_web/components/header.ex‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
defmodule AlgoraWeb.Components.Header do
2+
@moduledoc false
3+
use AlgoraWeb.Component
4+
use AlgoraWeb, :verified_routes
5+
6+
import AlgoraWeb.CoreComponents
7+
8+
def header(assigns) do
9+
~H"""
10+
<header class="absolute inset-x-0 top-0 z-50">
11+
<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
12+
<div class="flex lg:flex-1">
13+
<.wordmark class="h-8 w-auto text-foreground" />
14+
</div>
15+
<!-- Mobile menu button -->
16+
<div class="flex lg:hidden">
17+
<button
18+
type="button"
19+
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
20+
phx-click={JS.show(to: "#mobile-menu")}
21+
>
22+
<span class="sr-only">Open main menu</span>
23+
<.icon name="tabler-menu" class="h-6 w-6" />
24+
</button>
25+
</div>
26+
<!-- Desktop nav -->
27+
<div class="hidden lg:flex lg:gap-x-12">
28+
<.link
29+
href={AlgoraWeb.Constants.get(:docs_url)}
30+
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
31+
>
32+
Docs
33+
</.link>
34+
<.link
35+
href={AlgoraWeb.Constants.get(:blog_url)}
36+
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
37+
>
38+
Blog
39+
</.link>
40+
<.link
41+
navigate={~p"/pricing"}
42+
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
43+
>
44+
Pricing
45+
</.link>
46+
<.link
47+
href={AlgoraWeb.Constants.get(:github_url)}
48+
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
49+
>
50+
GitHub
51+
</.link>
52+
</div>
53+
54+
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
55+
<.button navigate={~p"/auth/login"} variant="subtle">
56+
Sign in
57+
</.button>
58+
</div>
59+
</nav>
60+
<!-- Mobile menu -->
61+
<div id="mobile-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
62+
<div class="fixed inset-0 z-50"></div>
63+
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-border">
64+
<!-- Mobile menu content -->
65+
<div class="flex items-center justify-between">
66+
<.wordmark class="h-8 w-auto text-foreground" />
67+
<button
68+
type="button"
69+
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
70+
phx-click={JS.hide(to: "#mobile-menu")}
71+
>
72+
<span class="sr-only">Close menu</span>
73+
<.icon name="tabler-x" class="h-6 w-6" />
74+
</button>
75+
</div>
76+
77+
<div class="mt-6 flow-root">
78+
<div class="-my-6 divide-y divide-border">
79+
<div class="space-y-2 py-6">
80+
<.link
81+
href={AlgoraWeb.Constants.get(:docs_url)}
82+
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
83+
>
84+
Docs
85+
</.link>
86+
<.link
87+
href={AlgoraWeb.Constants.get(:blog_url)}
88+
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
89+
>
90+
Blog
91+
</.link>
92+
<.link
93+
navigate={~p"/pricing"}
94+
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
95+
>
96+
Pricing
97+
</.link>
98+
<.link
99+
href={AlgoraWeb.Constants.get(:github_url)}
100+
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
101+
>
102+
GitHub
103+
</.link>
104+
</div>
105+
<div class="py-6">
106+
<.link
107+
navigate={~p"/auth/login"}
108+
class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
109+
>
110+
Sign in
111+
</.link>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</header>
118+
"""
119+
end
120+
end

‎lib/algora_web/live/home_live.ex‎

Lines changed: 2 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ defmodule AlgoraWeb.HomeLive do
1010
alias Algora.Accounts.User
1111
alias Algora.Payments.Transaction
1212
alias Algora.Repo
13+
alias AlgoraWeb.Components.Header
1314
alias AlgoraWeb.Components.Wordmarks
1415
alias AlgoraWeb.Data.PlatformStats
1516

@@ -34,117 +35,7 @@ defmodule AlgoraWeb.HomeLive do
3435
def render(assigns) do
3536
~H"""
3637
<div class="bg-gradient-to-br from-primary/5 to-muted/20">
37-
<header class="absolute inset-x-0 top-0 z-50">
38-
<nav
39-
class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
40-
aria-label="Global"
41-
>
42-
<div class="flex lg:flex-1">
43-
<.wordmark class="h-8 w-auto text-foreground" />
44-
</div>
45-
<!-- Mobile menu button -->
46-
<div class="flex lg:hidden">
47-
<button
48-
type="button"
49-
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
50-
phx-click={JS.show(to: "#mobile-menu")}
51-
>
52-
<span class="sr-only">Open main menu</span>
53-
<.icon name="tabler-menu" class="h-6 w-6" />
54-
</button>
55-
</div>
56-
<!-- Desktop nav -->
57-
<div class="hidden lg:flex lg:gap-x-12">
58-
<.link
59-
href={AlgoraWeb.Constants.get(:docs_url)}
60-
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
61-
>
62-
Docs
63-
</.link>
64-
<.link
65-
href={AlgoraWeb.Constants.get(:blog_url)}
66-
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
67-
>
68-
Blog
69-
</.link>
70-
<.link
71-
navigate={~p"/pricing"}
72-
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
73-
>
74-
Pricing
75-
</.link>
76-
<.link
77-
href={AlgoraWeb.Constants.get(:github_url)}
78-
class="text-sm/6 font-semibold text-muted-foreground hover:text-foreground"
79-
>
80-
GitHub
81-
</.link>
82-
</div>
83-
84-
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
85-
<.button navigate={~p"/auth/login"} variant="subtle">
86-
Sign in
87-
</.button>
88-
</div>
89-
</nav>
90-
<!-- Mobile menu -->
91-
<div id="mobile-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
92-
<div class="fixed inset-0 z-50"></div>
93-
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-border">
94-
<!-- Mobile menu content -->
95-
<div class="flex items-center justify-between">
96-
<.wordmark class="h-8 w-auto text-foreground" />
97-
<button
98-
type="button"
99-
class="rounded-md p-2.5 text-muted-foreground hover:text-foreground"
100-
phx-click={JS.hide(to: "#mobile-menu")}
101-
>
102-
<span class="sr-only">Close menu</span>
103-
<.icon name="tabler-x" class="h-6 w-6" />
104-
</button>
105-
</div>
106-
107-
<div class="mt-6 flow-root">
108-
<div class="-my-6 divide-y divide-border">
109-
<div class="space-y-2 py-6">
110-
<.link
111-
href={AlgoraWeb.Constants.get(:docs_url)}
112-
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
113-
>
114-
Docs
115-
</.link>
116-
<.link
117-
href={AlgoraWeb.Constants.get(:blog_url)}
118-
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
119-
>
120-
Blog
121-
</.link>
122-
<.link
123-
navigate={~p"/pricing"}
124-
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
125-
>
126-
Pricing
127-
</.link>
128-
<.link
129-
href={AlgoraWeb.Constants.get(:github_url)}
130-
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
131-
>
132-
GitHub
133-
</.link>
134-
</div>
135-
<div class="py-6">
136-
<.link
137-
navigate={~p"/auth/login"}
138-
class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-muted-foreground hover:bg-muted"
139-
>
140-
Sign in
141-
</.link>
142-
</div>
143-
</div>
144-
</div>
145-
</div>
146-
</div>
147-
</header>
38+
<Header.header />
14839
14940
<main>
15041
<div class="relative isolate overflow-hidden min-h-screen">

0 commit comments

Comments
 (0)