self-hosted/algora-tv
1
0
Fork 0
mirror of https://github.com/algora-io/tv.git synced 2024-11-16 00:58:59 +02:00
Code Releases Activity

add navlinks (#25)

Browse Source
This commit is contained in:
Zafer Cesur 2024-04-20 16:17:53 +03:00 committed by GitHub
parent 058a34721d
commit 178df27404
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 248 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/algora_web/components/core_components.ex
View File

@ -241,7 +241,7 @@ defmodule AlgoraWeb.CoreComponents do
def dropdown(assigns) do
~H"""
<!-- User account dropdown -->
<div class="px-3 mt-6 w-full relative inline-block text-left">
<div class="px-3 w-full relative inline-block text-left">
<div>
<button
id={@id}

6
lib/algora_web/components/layouts.ex
View File

@ -8,11 +8,11 @@ defmodule AlgoraWeb.Layouts do
def sidebar_active_users(assigns) do
~H"""
<div :if={length(@users) > 0} class="mt-8">
<div :if={length(@users) > 0}>
<h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider" id={@id}>
For you
Live now
</h3>
<ul class="mt-2 space-y-1" role="group" aria-labelledby={@id}>
<ul class="mt-4 space-y-1" role="group" aria-labelledby={@id}>
<%= for user <- @users do %>
<li class="relative col-span-1 flex shadow-sm rounded-md overflow-hidden">
<.link

177
lib/algora_web/components/layouts/live.html.heex
View File

@ -43,28 +43,179 @@
<div class="flex-shrink-0 flex items-center px-4">
<.logo />
</div>
<div class="mt-5 flex-1 h-0 overflow-y-auto">
<div class="mt-4 flex-1 h-0 overflow-y-auto">
<%= if @current_user do %>
<.sidebar_account_dropdown id="mobile-account-dropdown" current_user={@current_user} />
<% else %>
<div class="px-4">
<.link
navigate="/auth/login"
class="flex items-center justify-center rounded px-4 py-2 overflow-hidden group bg-purple-500 relative hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-purple-400 transition-all ease-out duration-300"
>
<span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease">
</span>
<span class="relative font-semibold text-sm">Login</span>
</.link>
</div>
<a
class="group outline-none w-full"
target="_self"
rel="noopener noreferrer"
href="/auth/login"
>
<div class="flex text-center font-sans justify-center items-center shrink-0 duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none transition bg-indigo-700 hover:bg-indigo-600 disabled:opacity-50 h-10 px-2.5 text-base font-semibold rounded mx-3">
<div class="justify-center flex w-full items-center gap-x-1">
<span class="mx-auto grow self-center truncate px-1 text-gray-100 text-base font-semibold">
Login
</span>
</div>
</div>
</a>
<% end %>
<nav class="px-3 pt-1">
<nav class="px-3 pt-4">
<%= if @current_user do %>
<.sidebar_nav_links current_user={@current_user} active_tab={@active_tab} />
<div class="mb-4">
<.sidebar_nav_links current_user={@current_user} active_tab={@active_tab} />
</div>
<% end %>
<.sidebar_active_users id="desktop-active-users" users={@active_users} />
</nav>
<div class="text-white mt-1 flex origin-top flex-col overflow-y-auto pt-4 text-lg focus:outline-none focus:ring-0">
<p class="font-sans font-semibold text-xs uppercase tracking-wider mb-2 px-3 text-gray-400">
Community
</p>
<a
class="group outline-none w-full"
target="_blank"
rel="noopener noreferrer"
href="https://algora.io/discord"
>
<div class="flex text-center font-sans justify-center items-center shrink-0 duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none p-2 w-full gap-2 rounded-sm bg-transparent group-hover:bg-gray-800 buttonSize iconSize fontSize text-gray-400 group-hover:text-gray-300 px-3 -ml-1 border-b border-gray-800 transition hover:bg-gray-800">
<div class="text-left flex w-full items-center gap-x-1">
<div class="group mr-1 rounded border border-gray-900 bg-gray-900/40 p-1.5 group-hover:bg-gray-950">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 text-gray-300 group-hover:text-gray-200 group-hover-transition group-hover:duration-500 opacity-75 group-hover:opacity-90"
>
<path
d="M20.3303 4.25588C18.7767 3.52901 17.1156 3.00075 15.3789 2.69995C15.1656 3.08556 14.9164 3.60422 14.7446 4.0168C12.8985 3.73917 11.0693 3.73917 9.25716 4.0168C9.08539 3.60422 8.83055 3.08556 8.61536 2.69995C6.87681 3.00075 5.21376 3.53095 3.66019 4.25973C0.526643 8.99494 -0.322811 13.6125 0.101917 18.1645C2.18025 19.7166 4.19441 20.6594 6.17457 21.2764C6.66349 20.6035 7.09953 19.8882 7.47518 19.1344C6.75975 18.8625 6.07453 18.527 5.42707 18.1376C5.59884 18.0103 5.76686 17.8773 5.92918 17.7404C9.87819 19.5874 14.1689 19.5874 18.0707 17.7404C18.235 17.8773 18.403 18.0103 18.5728 18.1376C17.9235 18.5289 17.2364 18.8644 16.521 19.1363C16.8966 19.8882 17.3308 20.6054 17.8216 21.2783C19.8036 20.6613 21.8197 19.7185 23.898 18.1645C24.3964 12.8876 23.0467 8.31241 20.3303 4.25588ZM8.01318 15.3651C6.82772 15.3651 5.85555 14.2584 5.85555 12.9107C5.85555 11.563 6.80696 10.4544 8.01318 10.4544C9.21942 10.4544 10.1916 11.5611 10.1708 12.9107C10.1727 14.2584 9.21942 15.3651 8.01318 15.3651ZM15.9867 15.3651C14.8013 15.3651 13.8291 14.2584 13.8291 12.9107C13.8291 11.563 14.7805 10.4544 15.9867 10.4544C17.193 10.4544 18.1651 11.5611 18.1444 12.9107C18.1444 14.2584 17.193 15.3651 15.9867 15.3651Z"
fill="#FFFF"
>
</path>
</svg>
</div>
<span class="mx-auto grow self-center truncate px-1 text-gray-200 group-hover:text-gray-100 transition text-sm font-semibold">
Join the Discord community
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="h-3.5 text-gray-200 group-hover:text-gray-100 transition text-base font-normal ml-0.5 shrink-0 justify-end"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
>
</path>
</svg>
</div>
</div>
</a>
<a
class="group outline-none w-full"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/algora-io/tv/issues"
>
<div class="flex text-center font-sans justify-center items-center shrink-0 duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none p-2 w-full gap-2 rounded-sm bg-transparent group-hover:bg-gray-800 buttonSize iconSize fontSize text-gray-400 group-hover:text-gray-300 px-3 -ml-1 border-b border-gray-800 transition hover:bg-gray-800">
<div class="text-left flex w-full items-center gap-x-1">
<div class="group mr-1 rounded border border-gray-900 bg-gray-900/40 p-1.5 group-hover:bg-gray-950">
<svg
class="h-4 w-4 text-gray-300 group-hover:text-gray-200 group-hover-transition group-hover:duration-500"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_571_3822)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37017 0 0 5.50708 0 12.306C0 17.745 3.44015 22.3532 8.20626 23.9849C8.80295 24.0982 9.02394 23.7205 9.02394 23.3881C9.02394 23.0935 9.01657 22.3229 9.00921 21.2956C5.67219 22.0359 4.96501 19.6487 4.96501 19.6487C4.41989 18.2285 3.63168 17.8508 3.63168 17.8508C2.54144 17.0878 3.71271 17.1029 3.71271 17.1029C4.91344 17.1936 5.55433 18.372 5.55433 18.372C6.62247 20.2531 8.36096 19.7092 9.04604 19.3919C9.15654 18.5987 9.46593 18.0548 9.80479 17.745C7.13812 17.4353 4.33886 16.3777 4.33886 11.6638C4.33886 10.3192 4.80295 9.2238 5.57643 8.36261C5.4512 8.05288 5.03867 6.79887 5.69429 5.1067C5.69429 5.1067 6.7035 4.77432 8.99447 6.36827C9.95212 6.09632 10.9761 5.96034 12 5.95279C13.0166 5.95279 14.0479 6.09632 15.0055 6.36827C17.2965 4.77432 18.3057 5.1067 18.3057 5.1067C18.9613 6.79887 18.5488 8.05288 18.4236 8.36261C19.1897 9.2238 19.6538 10.3192 19.6538 11.6638C19.6538 16.3928 16.8471 17.4278 14.1731 17.7375C14.6004 18.1152 14.9908 18.8706 14.9908 20.0189C14.9908 21.6657 14.9761 22.9877 14.9761 23.3957C14.9761 23.728 15.1897 24.1058 15.8011 23.9849C20.5672 22.3532 24 17.745 24 12.3135C24 5.50708 18.6298 0 12 0Z"
fill="currentColor"
>
</path>
</g>
<defs>
<clipPath id="clip0_571_3822">
<rect width="24" height="24" fill="currentColor"></rect>
</clipPath>
</defs>
</svg>
</div>
<span class="mx-auto grow self-center truncate px-1 text-gray-200 group-hover:text-gray-100 transition text-sm font-semibold">
Recent GitHub issues
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="h-3.5 text-gray-200 group-hover:text-gray-100 transition text-base font-normal ml-0.5 shrink-0 justify-end"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
>
</path>
</svg>
</div>
</div>
</a>
<a
class="group outline-none w-full"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/algora-io/tv"
>
<div class="flex text-center font-sans justify-center items-center shrink-0 duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none p-2 w-full gap-2 rounded-sm bg-transparent group-hover:bg-gray-800 buttonSize iconSize fontSize text-gray-400 group-hover:text-gray-300 px-3 -ml-1 border-b border-gray-800 transition hover:bg-gray-800">
<div class="text-left flex w-full items-center gap-x-1">
<div class="group mr-1 rounded border border-gray-900 bg-gray-900/40 p-1.5 group-hover:bg-gray-950">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
class="h-4 w-4 text-gray-300 group-hover:text-gray-200 group-hover-transition group-hover:duration-500"
>
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd"
>
</path>
</svg>
</div>
<span class="mx-auto grow self-center truncate px-1 text-sm font-semibold text-gray-200 transition group-hover:text-gray-100">
Star us on GitHub: <span class="font-normal">22</span>
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
class="h-3.5 text-gray-200 group-hover:text-gray-100 transition text-base font-normal ml-0.5 shrink-0 justify-end"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
>
</path>
</svg>
</div>
</div>
</a>
</div>
</div>
</div>

101
lib/algora_web/components/layouts/root.html.heex
View File

@ -72,7 +72,7 @@
phx-hook="NavBar"
class="fixed z-30 top-0 w-full transition-colors flex gap-4 items-center justify-between h-[56px] px-4"
>
<div class="flex items-center gap-4">
<div class="sm:w-1/3 flex items-center gap-4">
<button
type="button"
aria-expanded="false"
@ -85,7 +85,7 @@
</button>
<.logo class="w-16 h-auto hidden sm:flex" />
</div>
<div class="flex sm:pr-[6vw] font-medium text-gray-300 text-sm items-center gap-1">
<div class="sm:w-1/3 justify-center flex font-medium text-gray-300 text-sm items-center gap-1">
<div>Built with</div>
<a href="https://elixir-lang.org">
<img src={~p"/images/elixir.png"} alt="Elixir" class="shrink-0 mb-1 h-5 mx-auto" />
@ -95,26 +95,85 @@
<img src={~p"/images/tigris.svg"} alt="Tigris" class="shrink-0 mt-2 h-4 mx-auto" />
</a>
</div>
<%= if @current_user do %>
<div class="shrink-0 hidden sm:block">
<.simple_dropdown id="navbar-account-dropdown">
<:img src={@current_user.avatar_url} alt={@current_user.handle} />
<:link navigate={channel_path(@current_user)}>Channel</:link>
<:link navigate={~p"/channel/settings"}>Settings</:link>
<:link href={~p"/auth/logout"} method={:delete}>Sign out</:link>
</.simple_dropdown>
</div>
<% else %>
<.link
navigate="/auth/login"
class="hidden sm:flex rounded px-4 py-2 overflow-hidden group bg-purple-500 relative hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-purple-400 transition-all ease-out duration-300"
<div class="sm:w-1/3 items-center justify-end gap-2 hidden sm:flex">
<a
class="group outline-none w-fit"
target="_blank"
rel="noopener noreferrer"
href="https://algora.io/discord"
>
<span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease">
</span>
<span class="relative font-semibold text-sm">Login</span>
</.link>
<% end %>
<div class="text-center font-sans justify-center items-center shrink-0 transition duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none bg-transparent hover:bg-slate-850 disabled:opacity-50 h-8 px-2 text-sm font-semibold rounded-[3px] hidden whitespace-nowrap lg:flex">
<div class="justify-center flex w-full items-center gap-x-1">
<svg
class="h-7 w-7"
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.0881 7.3374C18.0116 7.27279 17.9402 7.2032 17.8637 7.14356C17.554 6.88097 17.2269 6.63856 16.8846 6.41792C16.4342 6.13677 15.9516 5.90824 15.4464 5.73702C15.0844 5.61277 14.7172 5.51835 14.35 5.40901C14.2837 5.40901 14.2786 5.38414 14.3092 5.3245C14.3398 5.26485 14.4061 5.14558 14.4469 5.05115C14.4538 5.03366 14.4667 5.0191 14.4835 5.01001C14.5003 5.00092 14.5198 4.99789 14.5387 5.00146C14.809 5.04619 15.0844 5.07601 15.3547 5.13069C15.8281 5.229 16.2896 5.3756 16.7316 5.56805C17.1998 5.76225 17.6502 5.99501 18.0779 6.26385C18.2267 6.353 18.3697 6.45094 18.5063 6.5571C18.5891 6.62989 18.6566 6.71764 18.7051 6.81552C19.1108 7.51363 19.4521 8.24546 19.7251 9.00236C20.1066 10.0234 20.3983 11.0742 20.5971 12.1435C20.7042 12.715 20.7909 13.2866 20.8674 13.8631C20.9184 14.216 20.9388 14.5788 20.9745 14.9366C20.9745 15.0559 20.9745 15.1702 21 15.2895C21 15.3164 20.9911 15.3425 20.9745 15.3641C20.462 15.9257 19.8549 16.398 19.1794 16.7606C18.5379 17.1017 17.8516 17.3558 17.1395 17.5161C16.7511 17.6096 16.3554 17.6711 15.9564 17.7H15.7116C15.701 17.7002 15.6904 17.6981 15.6807 17.6938C15.671 17.6895 15.6624 17.6831 15.6555 17.6752C15.4413 17.4068 15.2323 17.1334 15.0232 16.8551V16.8253C16.3606 16.3823 17.5548 15.6041 18.4859 14.5689C18.3788 14.6434 18.2819 14.718 18.1748 14.7826C17.8739 14.9665 17.5781 15.1504 17.267 15.3193C16.7354 15.61 16.1728 15.8433 15.5892 16.0151C14.6422 16.3069 13.6595 16.474 12.6671 16.5121H12.3713H11.8155C11.4011 16.5146 10.9871 16.4897 10.5762 16.4376C10.1887 16.3879 9.80109 16.3332 9.41351 16.2636C8.86661 16.1567 8.33068 16.002 7.81221 15.8014C7.15233 15.5479 6.523 15.2246 5.93553 14.8372L5.55306 14.5788C6.01711 15.0934 6.54864 15.5462 7.13396 15.9257C7.72153 16.3044 8.35541 16.6099 9.02084 16.8352L8.98514 16.8899L8.39358 17.6553C8.38145 17.6729 8.36453 17.6868 8.34472 17.6956C8.3249 17.7044 8.30298 17.7076 8.28138 17.705C7.93875 17.691 7.59775 17.6511 7.26145 17.5857C6.76756 17.4952 6.28289 17.3621 5.81314 17.1881C5.27458 16.9934 4.76114 16.7382 4.28323 16.4277C3.86783 16.1551 3.48621 15.8365 3.14601 15.4784C3.14601 15.4784 3.12051 15.4386 3.10011 15.4287C3.06012 15.3983 3.03012 15.3571 3.01381 15.3103C2.9975 15.2635 2.99559 15.2131 3.00831 15.1653L3.05421 14.6335C3.0899 14.2856 3.1205 13.9426 3.1664 13.5947C3.2123 13.2468 3.28879 12.7647 3.36529 12.3472C3.51174 11.5311 3.7093 10.7244 3.95685 9.93177C4.16738 9.2543 4.42116 8.59033 4.71671 7.94373C4.91624 7.50667 5.14275 7.08178 5.39497 6.6714C5.46939 6.5728 5.56514 6.49137 5.67544 6.43284C6.1388 6.11857 6.63239 5.84893 7.14925 5.62769C7.71444 5.38251 8.30641 5.20075 8.91375 5.08594L9.47981 5.00643C9.49599 5.00328 9.51279 5.00611 9.52694 5.01438C9.54108 5.02265 9.55155 5.03575 9.55631 5.05115L9.7042 5.33942C9.7297 5.38415 9.7042 5.39907 9.6685 5.40901C9.41351 5.47859 9.15854 5.54319 8.90865 5.61774C8.45618 5.75584 8.01886 5.93729 7.60313 6.15946C7.24627 6.34465 6.9052 6.5574 6.58319 6.79565C6.3588 6.9696 6.14462 7.14853 5.92533 7.32745C5.9235 7.33135 5.92255 7.33557 5.92255 7.33986C5.92255 7.34415 5.9235 7.3484 5.92533 7.35229L5.99163 7.32248C6.471 7.09882 6.95037 6.86522 7.43994 6.65647C8.00719 6.4106 8.59831 6.22081 9.20443 6.08991C9.61682 5.99062 10.0361 5.92083 10.459 5.88114C10.8414 5.84635 11.2239 5.82649 11.6013 5.80661C11.79 5.80661 11.9787 5.80661 12.1673 5.80661C12.5141 5.80661 12.866 5.8414 13.2128 5.86625C13.8437 5.91322 14.4686 6.01806 15.0793 6.17936C15.6332 6.32264 16.1739 6.51049 16.6959 6.74099L17.9606 7.33243L18.0218 7.36224L18.0881 7.3374ZM9.35232 10.5679C9.08643 10.5761 8.82881 10.66 8.6113 10.8093C8.39378 10.9586 8.2259 11.1667 8.12839 11.4079C7.98657 11.7022 7.93351 12.0296 7.97541 12.3522C8.01397 12.7406 8.19505 13.1024 8.48538 13.371C8.61754 13.5006 8.77761 13.6 8.95401 13.6619C9.13041 13.7238 9.31872 13.7467 9.50531 13.7289C9.68475 13.7178 9.85988 13.6705 10.0196 13.5901C10.1794 13.5097 10.3203 13.3979 10.4335 13.2617C10.7252 12.9245 10.8682 12.4886 10.8312 12.049C10.8196 11.7253 10.7096 11.4122 10.515 11.1494C10.3862 10.9659 10.2123 10.8166 10.0093 10.7151C9.80628 10.6135 9.58046 10.563 9.35232 10.5679ZM16.1094 12.1733C16.1148 11.8593 16.0319 11.55 15.8697 11.2787C15.7548 11.0583 15.5775 10.8747 15.3587 10.7496C15.14 10.6245 14.889 10.5632 14.6356 10.5729C14.451 10.578 14.2698 10.6219 14.1043 10.7017C13.9388 10.7815 13.793 10.8953 13.6769 11.0351C13.5285 11.203 13.4159 11.398 13.3459 11.6088C13.2758 11.8196 13.2496 12.0419 13.2689 12.2627C13.2861 12.6947 13.4787 13.1023 13.8043 13.3959C13.9417 13.5243 14.1072 13.6205 14.2883 13.6773C14.4694 13.7342 14.6614 13.7501 14.8498 13.7239C15.1962 13.6764 15.5095 13.4978 15.7218 13.2269C15.9694 12.9284 16.106 12.5571 16.1094 12.1733Z"
fill="#CBD5E1"
>
</path>
</svg>
</div>
</div>
</a>
<a
class="group outline-none w-fit"
target="_blank"
rel="noopener noreferrer"
href="https://github.com/algora-io/tv"
>
<div class="text-center font-sans justify-center items-center shrink-0 transition duration-150 select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none bg-transparent hover:bg-slate-850 disabled:opacity-50 h-8 text-sm font-semibold rounded-[3px] hidden whitespace-nowrap p-2 lg:flex">
<div class="justify-center flex w-full items-center gap-x-1">
<svg
class="h-4 text-bright transition group-disabled:text-dimmed/80 mr-0.5 shrink-0 justify-start"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_571_3822)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37017 0 0 5.50708 0 12.306C0 17.745 3.44015 22.3532 8.20626 23.9849C8.80295 24.0982 9.02394 23.7205 9.02394 23.3881C9.02394 23.0935 9.01657 22.3229 9.00921 21.2956C5.67219 22.0359 4.96501 19.6487 4.96501 19.6487C4.41989 18.2285 3.63168 17.8508 3.63168 17.8508C2.54144 17.0878 3.71271 17.1029 3.71271 17.1029C4.91344 17.1936 5.55433 18.372 5.55433 18.372C6.62247 20.2531 8.36096 19.7092 9.04604 19.3919C9.15654 18.5987 9.46593 18.0548 9.80479 17.745C7.13812 17.4353 4.33886 16.3777 4.33886 11.6638C4.33886 10.3192 4.80295 9.2238 5.57643 8.36261C5.4512 8.05288 5.03867 6.79887 5.69429 5.1067C5.69429 5.1067 6.7035 4.77432 8.99447 6.36827C9.95212 6.09632 10.9761 5.96034 12 5.95279C13.0166 5.95279 14.0479 6.09632 15.0055 6.36827C17.2965 4.77432 18.3057 5.1067 18.3057 5.1067C18.9613 6.79887 18.5488 8.05288 18.4236 8.36261C19.1897 9.2238 19.6538 10.3192 19.6538 11.6638C19.6538 16.3928 16.8471 17.4278 14.1731 17.7375C14.6004 18.1152 14.9908 18.8706 14.9908 20.0189C14.9908 21.6657 14.9761 22.9877 14.9761 23.3957C14.9761 23.728 15.1897 24.1058 15.8011 23.9849C20.5672 22.3532 24 17.745 24 12.3135C24 5.50708 18.6298 0 12 0Z"
fill="currentColor"
>
</path>
</g>
<defs>
<clipPath id="clip0_571_3822">
<rect width="24" height="24" fill="currentColor"></rect>
</clipPath>
</defs>
</svg>
<span class="hidden xl:block">Star</span>
<span class="font-normal">22</span>
</div>
</div>
</a>
<%= if @current_user do %>
<div class="shrink-0">
<.simple_dropdown id="navbar-account-dropdown">
<:img src={@current_user.avatar_url} alt={@current_user.handle} />
<:link navigate={channel_path(@current_user)}>Channel</:link>
<:link navigate={~p"/channel/settings"}>Settings</:link>
<:link href={~p"/auth/logout"} method={:delete}>Sign out</:link>
</.simple_dropdown>
</div>
<% else %>
<.link
navigate="/auth/login"
class="flex rounded px-4 py-2 overflow-hidden group bg-purple-500 relative hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-purple-400 transition-all ease-out duration-300"
>
<span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease">
</span>
<span class="relative font-semibold text-sm">Login</span>
</.link>
<% end %>
</div>
</div>
<%= @inner_content %>
</div>