feat: redesign navigation bar

This commit is contained in:
2024-01-10 13:57:44 +07:00
parent f2504071cd
commit a5ad4fe05c
17 changed files with 274 additions and 197 deletions

View File

@@ -1,19 +1,24 @@
import { SVGProps } from 'react';
import { SVGProps } from "react";
export function ComposeIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M19.121 3.707a3 3 0 00-4.242 0l-12 12A3 3 0 002 17.828V20a1 1 0 001 1h2.172a3 3 0 002.12-.879l12-12a3 3 0 000-4.243l-.17-.171zM21.67 18.749a7.14 7.14 0 01-.93.827c-.58.43-1.503.968-2.574.968-1.006 0-1.878-.463-2.503-.796l-.066-.035c-.723-.384-1.168-.598-1.61-.598-1.057 0-1.732.558-2.26 1.116a1 1 0 11-1.454-1.373c.654-.692 1.824-1.743 3.714-1.743.986 0 1.85.46 2.468.79l.08.042c.717.38 1.172.598 1.631.598.429 0 .923-.234 1.384-.576a5.148 5.148 0 00.694-.624 1.01 1.01 0 011.41-.102c.476.412.418 1.076.017 1.506z"
></path>
</svg>
);
export function ComposeIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M20 14c0 2.8 0 4.2-.545 5.27a5 5 0 01-2.185 2.185C16.2 22 14.8 22 12 22h-2c-2.8 0-4.2 0-5.27-.545a5 5 0 01-2.185-2.185C2 18.2 2 16.8 2 14v-2c0-2.8 0-4.2.545-5.27A5 5 0 014.73 4.545C5.8 4 7.2 4 10 4m-1.938 9.502c.008-.351.013-.527.055-.691.038-.146.097-.286.177-.414.09-.144.213-.268.46-.517l9.396-9.45a1.46 1.46 0 011.828-.196A5.87 5.87 0 0121.7 3.946l.075.116c.376.605.253 1.371-.24 1.867l-9.322 9.375c-.257.257-.385.386-.534.478a1.476 1.476 0 01-.429.178c-.17.04-.351.04-.714.04L8 15.996l.062-2.495z"
/>
</svg>
);
}

View File

@@ -0,0 +1,25 @@
import { SVGProps } from "react";
export function ComposeFilledIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M22.537 3.398a6.87 6.87 0 00-2.017-2.004 2.46 2.46 0 00-3.079.331l-9.396 9.45-.047.047c-.2.2-.402.403-.554.648a2.49 2.49 0 00-.295.691c-.072.28-.079.566-.086.85L7 15.97a1 1 0 00.998 1.025l2.538.004h.068c.293.001.59.002.88-.068.254-.06.497-.161.72-.298.253-.156.462-.367.668-.574h.001l.05-.05 9.322-9.376c.791-.795 1.021-2.067.381-3.098-.024-.04-.054-.085-.073-.113l-.005-.008-.01-.017z"
/>
<path
fill="currentColor"
d="M5.184 5.436c.37-.189.842-.308 1.613-.371L10 5a1 1 0 100-2h-.044c-1.363 0-2.447 0-3.321.071-.896.074-1.66.227-2.359.583a6 6 0 00-2.622 2.622c-.356.7-.51 1.463-.583 2.359C1 9.509 1 10.593 1 11.956v2.088c0 1.363 0 2.447.071 3.322.074.895.227 1.659.583 2.358a6 6 0 002.622 2.622c.7.356 1.463.51 2.359.583C7.509 23 8.593 23 9.956 23h2.088c1.363 0 2.447 0 3.321-.071.896-.074 1.66-.227 2.359-.583a5.998 5.998 0 002.622-2.622c.356-.7.51-1.463.583-2.358.071-.875.071-1.96.071-3.322V14a1 1 0 10-2 0c0 1.417 0 2.419-.065 3.203-.063.771-.182 1.243-.371 1.613a4 4 0 01-1.748 1.748c-.37.189-.841.308-1.613.371C14.419 21 13.417 21 12 21h-2c-1.417 0-2.419 0-3.203-.065-.771-.063-1.243-.182-1.613-.371a4 4 0 01-1.748-1.748c-.189-.37-.308-.841-.371-1.613C3 16.419 3 15.417 3 14v-2c0-1.417 0-2.419.065-3.203.063-.771.182-1.243.371-1.613a4 4 0 011.748-1.748z"
/>
</svg>
);
}

View File

@@ -1,18 +1,20 @@
export function NwcIcon(props: JSX.IntrinsicElements["svg"]) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="25"
height="24"
fill="none"
viewBox="0 0 24 25"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
{...props}
>
<path d="M2 15v-3.5c0-2.8 0-4.2.545-5.27A5 5 0 014.73 4.045C5.8 3.5 7.2 3.5 10 3.5h3.5c1.398 0 2.097 0 2.648.228a3 3 0 011.624 1.624c.207.5.226 1.123.228 2.28M2 15c0 1.33 0 2.495.38 3.413a5 5 0 002.707 2.706c.918.381 2.083.381 4.413.381h5c2.33 0 3.495 0 4.413-.38a5 5 0 002.706-2.707C22 17.495 22 16.33 22 15c0-2.33 0-3.495-.38-4.413a5 5 0 00-2.707-2.706A4.062 4.062 0 0018 7.63M2 15c0-2.33 0-3.495.38-4.413A5 5 0 015.088 7.88C6.005 7.5 7.17 7.5 9.5 7.5h5c1.634 0 2.695 0 3.5.131M14 12.5h3" />
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M13 4H9.222M13 4a4 4 0 010 8H9.222c-.206 0-.31 0-.396-.008a2 2 0 01-1.818-1.818C7 10.087 7 9.984 7 9.778V6.222c0-.206 0-.31.008-.396A2 2 0 019 4m4 0V2M9.222 4H9m.222 0H9m1.2 16H15a4 4 0 100-8h-4.8c-1.12 0-1.68 0-2.108.218a2 2 0 00-.874.874C7 13.52 7 14.08 7 15.2v1.6c0 1.12 0 1.68.218 2.108a2 2 0 00.874.874C8.52 20 9.08 20 10.2 20zm0 0H9M7 4v16M7 4H5m2 0h2M5 20h2m2 2v-2M9 2v2m4 18v-2m-6 0h2"
/>
</svg>
);
}

View File

@@ -0,0 +1,21 @@
import { SVGProps } from "react";
export function SettingsFilledIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M10.899 2.116a5.3 5.3 0 012.203 0c.823.175 1.58.611 2.695 1.256l1.78 1.027c1.117.644 1.874 1.08 2.437 1.705a5.294 5.294 0 011.102 1.907c.26.8.26 1.674.26 2.961v2.056c0 1.287 0 2.16-.26 2.96a5.294 5.294 0 01-1.102 1.908c-.563.625-1.32 1.061-2.436 1.705l-1.781 1.027c-1.116.645-1.872 1.081-2.696 1.256a5.3 5.3 0 01-2.202 0c-.823-.175-1.58-.611-2.696-1.256l-1.78-1.027c-1.117-.644-1.874-1.08-2.437-1.705a5.294 5.294 0 01-1.102-1.907c-.26-.8-.26-1.674-.259-2.961v-2.056c0-1.287 0-2.16.26-2.96a5.295 5.295 0 011.101-1.908C4.55 5.48 5.306 5.043 6.422 4.4l1.781-1.027C9.32 2.727 10.076 2.29 10.9 2.116zM12 9.9a2.1 2.1 0 100 4.2 2.1 2.1 0 000-4.2z"
/>
</svg>
);
}