Загрузка...
Боковая панель навигации для стримингового дашборда. Группировка разделов: главное, библиотека, каналы. Современный UI для управления медиа.
<aside
class="border-gradient hidden md:flex flex-col bg-[#050713]/60 w-full max-w-[260px] rounded-[32px] pt-6 pr-4 pb-6 pl-4 justify-between mx-auto m-12">
<div class="space-y-8">
<!-- Logo -->
<div class="flex items-center justify-between pb-4 border-b border-slate-800/70">
<div class="flex items-center gap-2">
<div
class="h-8 w-8 rounded-2xl bg-gradient-to-br from-yellow-300 to-amber-500 flex items-center justify-center">
<span class="h-3 w-3 rounded-full bg-[#050713]"></span>
</div>
<span class="text-sm font-semibold tracking-tight text-slate-50">NovaCast</span>
</div>
<button class="flex bg-slate-900/80 w-9 h-9 rounded-2xl items-center justify-center" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 16px">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" style="color: rgb(203, 213, 225); width: 17px; height: 17px" class="iconify iconify--solar w-[17px] h-[17px]" aria-hidden="true" role="img" data-icon="solar:compass-bold-duotone" data-solar="hamburger-menu-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#cbd5e1" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22" opacity=".5" class=""></path><path fill="#cbd5e1" d="M18.75 8a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75" class=""></path></svg>
</button>
</div>
<!-- Main nav -->
<nav class="space-y-4">
<div class="space-y-1 pb-3 border-b border-slate-800/70">
<p class="text-[11px] font-medium text-slate-500 uppercase tracking-[0.16em]">Browse</p>
<button class="w-full flex items-center justify-between rounded-2xl bg-gradient-to-r from-yellow-400/90 to-amber-400/80 px-3 py-2.5 text-[13px] font-semibold tracking-tight text-slate-950">
<span class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-slate-950/70">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:home-bold-duotone" class="iconify text-[16px] text-yellow-300 iconify--solar"><defs class=""><path id="IconifyId19a860e4ec5a771b80" d="M10.75 9.5a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0" class=""></path></defs><path fill="currentColor" fill-rule="evenodd" d="m21.532 11.586l-.782-.626v10.29H22a.75.75 0 0 1 0 1.5H2a.75.75 0 1 1 0-1.5h1.25V10.96l-.781.626a.75.75 0 1 1-.937-1.172l8.125-6.5a3.75 3.75 0 0 1 4.686 0l8.125 6.5a.75.75 0 1 1-.936 1.172M12 6.75a2.75 2.75 0 1 0 0 5.5a2.75 2.75 0 0 0 0-5.5m1.746 6.562c-.459-.062-1.032-.062-1.697-.062h-.098c-.665 0-1.238 0-1.697.062c-.491.066-.963.215-1.345.597s-.531.854-.597 1.345c-.062.459-.062 1.032-.062 1.697v4.299h7.5v-4.423c0-.612-.004-1.143-.062-1.573c-.066-.491-.215-.963-.597-1.345s-.853-.531-1.345-.597" clip-rule="evenodd" class=""></path><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" opacity=".5" class=""><use href="#IconifyId19a860e4ec5a771b80" class=""></use><use href="#IconifyId19a860e4ec5a771b80" class=""></use></g><path fill="currentColor" d="M12.05 13.25c.664 0 1.237 0 1.696.062c.492.066.963.215 1.345.597s.531.853.597 1.345c.058.43.062.96.062 1.573v4.423h-7.5v-4.3c0-.664 0-1.237.062-1.696c.066-.492.215-.963.597-1.345s.854-.531 1.345-.597c.459-.062 1.032-.062 1.697-.062zM16 3h2.5a.5.5 0 0 1 .5.5v4.14l-3.5-2.8V3.5A.5.5 0 0 1 16 3" opacity=".5" class=""></path></svg>
</span>
Home Feed
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:compass-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M13.024 14.56c.493-.197.739-.296.932-.465q.075-.065.139-.139c.17-.193.268-.44.465-.932c.924-2.31 1.386-3.465.938-4.124a1.5 1.5 0 0 0-.398-.398c-.66-.448-1.814.014-4.124.938c-.493.197-.74.295-.933.465q-.074.065-.138.139c-.17.193-.268.44-.465.932c-.924 2.31-1.386 3.464-.938 4.124a1.5 1.5 0 0 0 .398.398c.66.448 1.814-.014 4.124-.938" class=""></path></svg>
</span>
Explore
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(203, 213, 225); width: 16px; height: 16px;" class="iconify iconify--solar w-[16px] h-[16px]" aria-hidden="true" role="img" data-icon="solar:compass-bold-duotone" data-solar="star-circle-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#cbd5e1" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="#cbd5e1" d="m10.413 8.498l.164-.294C11.21 7.068 11.527 6.5 12 6.5s.79.568 1.423 1.704l.164.294c.18.323.27.484.41.59c.14.107.316.147.665.226l.318.072c1.23.278 1.845.417 1.991.888c.147.47-.273.96-1.111 1.941l-.217.254c-.238.278-.357.418-.41.59c-.055.172-.037.358 0 .73l.032.338c.127 1.308.19 1.962-.193 2.253c-.383.29-.958.026-2.11-.504l-.298-.138c-.327-.15-.49-.226-.664-.226c-.173 0-.337.076-.664.226l-.298.138c-1.152.53-1.727.795-2.11.504c-.383-.29-.32-.945-.193-2.253l.032-.338c.037-.372.055-.558 0-.73c-.053-.172-.172-.312-.41-.59l-.217-.254c-.838-.98-1.258-1.47-1.111-1.941c.146-.47.76-.61 1.99-.888l.319-.072c.35-.08.524-.119.665-.225c.14-.107.23-.268.41-.59" class=""></path></svg>
</span>
Arena Live
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70">
<span class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-xl bg-slate-90080">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:rocket-2-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="m15.502 14.367l5.03-5.014c.724-.722 1.087-1.083 1.277-1.543C22 7.351 22 6.84 22 5.82v-.49c0-1.57 0-2.355-.49-2.843C21.022 2 20.235 2 18.659 2h-.489c-1.024 0-1.537 0-1.997.19s-.823.551-1.547 1.274l-5.03 5.014c-.846.844-1.371 1.367-1.574 1.873c-.064.16-.097.317-.097.483c0 .69.557 1.245 1.671 2.356l.15.149l1.754-1.78a.645.645 0 0 1 .919.906l-1.76 1.785l.119.117c1.114 1.11 1.67 1.666 2.362 1.666q.228 0 .447-.081c.519-.191 1.048-.72 1.916-1.585m2.363-5.888c-.652.65-1.71.65-2.363 0a1.66 1.66 0 0 1 0-2.356c.653-.65 1.71-.65 2.363 0s.653 1.705 0 2.356M2.774 12.481a.76.76 0 0 1 0 1.074l-.156.155a.34.34 0 0 0 0 .48a.34.34 0 0 0 .483 0l1.713-1.71a.76.76 0 0 1 1.072 1.075l-1.712 1.71a1.86 1.86 0 0 1-2.629 0a1.857 1.857 0 0 1 0-2.629l.156-.155a.76.76 0 0 1 1.073 0m4.523 4.215c.293.3.288.78-.012 1.073l-1.73 1.692a.759.759 0 0 1-1.061-1.085l1.73-1.692a.76.76 0 0 1 1.073.012m4.184 1.422a.76.76 0 0 1 0 1.074l-1.713 1.71a.34.34 0 0 0 0 .48c.134.133.35.133.484 0l.156-.155A.759.759 0 0 1 11.48 22.3l-.155.155a1.86 1.86 0 0 1-2.63 0a1.857 1.857 0 0 1 0-2.629l1.713-1.71a.76.76 0 0 1 1.073.001" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M10.846 5.41L8.658 7.59c-.402.401-.77.769-1.062 1.101a5 5 0 0 0-.532.706l-.022-.021l-.08-.08a4.2 4.2 0 0 0-1.319-.865l-.106-.042l-.325-.13a.658.658 0 0 1-.223-1.077c.963-.96 2.12-2.114 2.679-2.346a2.9 2.9 0 0 1 1.537-.197c.47.07.915.311 1.641.77m3.736 11.484c.176.18.293.306.399.44q.21.268.373.567c.123.223.218.462.408.939c.155.388.67.491.968.193l.073-.072c.963-.96 2.12-2.114 2.353-2.67a2.9 2.9 0 0 0 .197-1.534c-.07-.468-.312-.912-.772-1.636l-2.195 2.189c-.411.41-.789.786-1.13 1.08a5 5 0 0 1-.674.504m-6.896-2.33a.759.759 0 1 0-1.073-1.073L4.47 15.632a.759.759 0 1 0 1.074 1.074zm2.809 2.806a.759.759 0 1 0-1.073-1.073l-2.128 2.127a.76.76 0 0 0 1.074 1.074z" opacity=".5" class=""></path></svg>
</span>
Galaxy Raids
</span>
</button>
</div>
<!-- Library -->
<div class="space-y-1 pb-3 border-b border-slate-800/70">
<p class="text-[11px] font-medium text-slate-500 uppercase tracking-[0.16em]">Library</p>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:video-library-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M15.328 7.542H8.672c-3.374 0-5.062 0-6.01.987s-.725 2.511-.278 5.56l.422 2.892c.35 2.391.525 3.587 1.422 4.303c.898.716 2.22.716 4.867.716h5.81c2.646 0 3.97 0 4.867-.716s1.072-1.912 1.422-4.303l.422-2.892c.447-3.049.67-4.573-.278-5.56s-2.636-.987-6.01-.987m-.747 8.252c.559-.346.559-1.242 0-1.588l-3.371-2.09c-.543-.337-1.21.101-1.21.794v4.18c0 .693.667 1.13 1.21.794z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M8.51 2h6.98c.232 0 .41 0 .566.015c1.108.109 2.015.775 2.4 1.672H5.543c.384-.897 1.291-1.563 2.399-1.672C8.099 2 8.277 2 8.51 2" opacity=".4" class=""></path><path fill="currentColor" d="M6.31 4.723c-1.39 0-2.53.84-2.911 1.953l-.023.07c.398-.12.812-.199 1.232-.253c1.08-.138 2.446-.138 4.032-.138h6.892c1.586 0 2.951 0 4.032.138a8 8 0 0 1 1.232.253l-.023-.07c-.38-1.114-1.521-1.953-2.912-1.953z" opacity=".7" class=""></path></svg>
</span>
My Streams
</span>
<span class="inline-flex h-5 w-5 items-center justify-center rounded-full bg-yellow-400/70 text-[11px] font-semibold text-slate-950">+</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:playlist-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M18.875 14.118c1.654.955 2.48 1.433 2.602 2.121a1.5 1.5 0 0 1 0 .521c-.121.69-.948 1.167-2.602 2.121c-1.654.955-2.48 1.433-3.138 1.194a1.5 1.5 0 0 1-.451-.261c-.536-.45-.536-1.404-.536-3.314s0-2.865.536-3.314a1.5 1.5 0 0 1 .451-.26c.657-.24 1.484.238 3.138 1.192" class=""></path></svg>
</span>
Watchlist
</span>
<span class="inline-flex px-2 h-5 items-center justify-center rounded-full bg-slate-900 text-[11px] font-semibold text-yellow-300">18</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:star-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" d="M18.483 16.767A8.5 8.5 0 0 1 8.118 7.081a1 1 0 0 1-.113.097c-.28.213-.63.292-1.33.45l-.635.144c-2.46.557-3.69.835-3.983 1.776c-.292.94.546 1.921 2.223 3.882l.434.507c.476.557.715.836.822 1.18c.107.345.071.717-.001 1.46l-.066.677c-.253 2.617-.38 3.925.386 4.506s1.918.052 4.22-1.009l.597-.274c.654-.302.981-.452 1.328-.452s.674.15 1.329.452l.595.274c2.303 1.06 3.455 1.59 4.22 1.01c.767-.582.64-1.89.387-4.507z" class=""></path><path fill="currentColor" d="m9.153 5.408l-.328.588c-.36.646-.54.969-.82 1.182q.06-.045.113-.097a8.5 8.5 0 0 0 10.366 9.686l-.02-.19c-.071-.743-.107-1.115 0-1.46c.107-.344.345-.623.822-1.18l.434-.507c1.677-1.96 2.515-2.941 2.222-3.882c-.292-.941-1.522-1.22-3.982-1.776l-.636-.144c-.699-.158-1.049-.237-1.33-.45c-.28-.213-.46-.536-.82-1.182l-.327-.588C13.58 3.136 12.947 2 12 2s-1.58 1.136-2.847 3.408" opacity=".5" class=""></path></svg>
</span>
Favorites
</span>
<span class="inline-flex px-2 h-5 items-center justify-center rounded-full bg-slate-900 text-[11px] font-semibold text-yellow-300">9</span>
</button>
</div>
<!-- Subscriptions -->
<div class="space-y-2 pt-2">
<p class="text-[11px] font-medium text-slate-500 uppercase tracking-[0.16em]">Channels</p>
<div class="space-y-1">
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="h-7 w-7 rounded-full overflow-hidden bg-slate-800">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/aa213242-cfaa-4e7a-8277-f98114018a97_320w.webp" class="w-full h-full object-cover" alt="">
</span>
Retro Circuit
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="h-7 w-7 rounded-full overflow-hidden bg-slate-800">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/327f7d37-a033-4198-b2c6-96d6bdb1cf90_320w.webp" class="w-full h-full object-cover" alt="">
</span>
Neon Panther
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="h-7 w-7 rounded-full overflow-hidden bg-slate-800">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/6a1e4c05-4e71-4530-8e1d-15141d463310_320w.webp" class="w-full h-full object-cover" alt="">
</span>
Pixel Nomads
</span>
</button>
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-400 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:menu-dots-bold-duotone" class="iconify text-[16px] text-slate-400 iconify--solar"><path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class=""></path><path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path></svg>
</span>
Show More
</span>
</button>
</div>
</div>
</nav>
</div>
<!-- Footer user -->
<div class="mt-6 pt-4 border-t border-slate-800/70 space-y-4">
<button class="w-full flex items-center justify-between rounded-2xl px-3 py-2.5 text-[13px] font-medium text-slate-300 hover:bg-slate-900/70 transition">
<span class="flex items-center gap-2">
<span class="inline-flex items-center justify-center bg-slate-900/80 w-7 h-7 rounded-xl" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:monitor-bold-duotone" class="iconify text-[16px] text-slate-300 iconify--solar"><path fill="currentColor" d="M10 2h4c3.771 0 5.657 0 6.828 1.172S22 6.229 22 10v1c0 .552 0 1.55-.006 2H2.007C2 12.55 2 11.552 2 11v-1c0-3.771 0-5.657 1.172-6.828S6.229 2 10 2" opacity=".5" class=""></path><path fill="currentColor" d="M7.985 17.5c-2.84 0-4.26 0-5.141-.879C2.272 16.052 2.07 15.258 2 14v-1h20v1c-.07 1.258-.272 2.052-.844 2.621c-.882.879-2.301.879-5.14.879h-3.263v4h3.262c.416 0 .753.336.753.75s-.337.75-.753.75h-8.03a.75.75 0 0 1-.753-.75c0-.414.337-.75.753-.75h3.262v-4z" class=""></path></svg>
</span>
Desktop App
</span>
</button>
<div class="flex items-center justify-between bg-slate-900/80 rounded-2xl px-3 py-3 border border-slate-800/80">
<div class="flex items-center gap-2">
<div class="h-9 w-9 rounded-full overflow-hidden bg-slate-800">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e4441e3d-7d4a-4ff3-be97-ea4be43fe5d3_320w.webp" class="w-full h-full object-cover" alt="">
</div>
<div class="">
<p class="text-[13px] font-semibold tracking-tight text-slate-50">Lyra Quinn</p>
<p class="text-[11px] text-slate-500">Creator • Rank #27</p>
</div>
</div>
<button class="h-8 w-8 rounded-full bg-yellow-400 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:settings-bold-duotone" class="iconify text-[16px] text-slate-950 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3" class=""></path></svg>
</button>
</div>
</div>
</aside>