<nav
class="flex flex-row items-center gap-2 justify-between rounded-lg border border-neutral-200 p-4 w-full"
>
<!-- Logo -->
<img src={illustrasiImage} alt="Your Logo" class="w-full max-w-24" />
<!-- Navigation -->
<div class="hidden md:flex gap-4 items-center">
<a href="#" class="text-neutral-900 text-sm"> Menu </a>
<a href="#" class="text-neutral-900 text-sm"> Menu </a>
<a href="#" class="text-neutral-900 text-sm"> Menu </a>
</div>
<!-- Actions -->
<div class="flex items-center gap-1 justify-center h-fit">
<!-- Buttons & Avatar -->
<div class="hidden md:block">
<div class="ina-text-field">
<div class="ina-text-field__wrapper">
<span class="ina-text-field__icon ina-text-field__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
</svg>
</span>
<input type="text" class="ina-text-field__input" placeholder="Search..." />
</div>
</div>
</div>
<button type="button" class="ina-button ina-button--primary ina-button--md bg-blue-400">
<span class="ina-button__text">Button CTA</span>
</button>
<button type="button" class="ina-button ina-button--tertiary ina-button--md">
<span class="ina-button__icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
></path>
<path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
</svg>
</span>
</button>
<button type="button" class="ina-button ina-button--tertiary ina-button--md p-0!">
<img src={AvatarImage} alt="User 1" class="ina-avatar ina-avatar--circle ina-avatar--md" />
</button>
</div>
</nav>
