osias-trade/nexa-trade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

A improved personal item style

Browse Source
This commit is contained in:
selimaj-dev
2026-02-11 19:08:39 +01:00
parent ca168b6d0c
commit 97d57daa41
2 changed files with 114 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Navbar.tsx
+13 -18
View File
@@ -7,6 +7,7 @@ import {
UserIcon,
WalletIcon,
} from "lucide-react";
import { SolanaLogo } from "../logos";
const links = [
{
@@ -20,6 +21,9 @@ const links = [
];
export default function Navbar() {
const personalItemClass =
"rounded-full bg-card p-2! aspect-square group hover:bg-accent/20 hover:text-accent";
return (
<nav className="border-b-2 border-b-border py-4 px-5 flex gap-5 items-center">
<a href="/markets" className="flex gap-1 items-center">
@@ -41,37 +45,28 @@ export default function Navbar() {
</ul>
</div>
<div className="ml-auto flex gap-4">
<Button
variant="outline"
className="rounded-full bg-card p-2! aspect-square"
>
<Button variant="outline" className={personalItemClass}>
<StarIcon />
</Button>
<Button
variant="outline"
className="rounded-full bg-card p-2! aspect-square"
>
<Button variant="outline" className={personalItemClass}>
<BellIcon />
</Button>
</div>
<div className="flex gap-4">
<Button
variant="outline"
className="rounded-full bg-card p-2! aspect-square group"
>
<Button variant="outline" className={personalItemClass}>
<div className="flex gap-1 items-center h-full">
<WalletIcon />
3.13
<span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent-foreground animate-colors duration-300" />
<div className="flex items-center">
<SolanaLogo className="p-0.5" />
3.13
</div>
<span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent/60 animate-colors duration-300" />
$248
<ChevronDownIcon />
</div>
</Button>
<Button
variant="outline"
className="rounded-full bg-card p-2! aspect-square"
>
<Button variant="outline" className={personalItemClass}>
<UserIcon />
</Button>
</div>
src/components/logos.tsx
+101
View File
@@ -0,0 +1,101 @@
import { SVGProps } from "react";
export const SolanaLogo = (props: SVGProps<SVGSVGElement>) => (
<svg
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 397.7 311.7"
style={{
background: "new 0 0 397.7 311.7",
}}
xmlSpace="preserve"
{...props}
>
<style type="text/css">
{
"\n\t.st0{fill:url(#SVGID_1_);}\n\t.st1{fill:url(#SVGID_2_);}\n\t.st2{fill:url(#SVGID_3_);}\n"
}
</style>
<linearGradient
id="SVGID_1_"
gradientUnits="userSpaceOnUse"
x1={360.8791}
y1={351.4553}
x2={141.213}
y2={-69.2936}
gradientTransform="matrix(1 0 0 -1 0 314)"
>
<stop
offset={0}
style={{
stopColor: "#00FFA3",
}}
/>
<stop
offset={1}
style={{
stopColor: "#DC1FFF",
}}
/>
</linearGradient>
<path
className="st0"
d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"
/>
<linearGradient
id="SVGID_2_"
gradientUnits="userSpaceOnUse"
x1={264.8291}
y1={401.6014}
x2={45.163}
y2={-19.1475}
gradientTransform="matrix(1 0 0 -1 0 314)"
>
<stop
offset={0}
style={{
stopColor: "#00FFA3",
}}
/>
<stop
offset={1}
style={{
stopColor: "#DC1FFF",
}}
/>
</linearGradient>
<path
className="st1"
d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"
/>
<linearGradient
id="SVGID_3_"
gradientUnits="userSpaceOnUse"
x1={312.5484}
y1={376.688}
x2={92.8822}
y2={-44.061}
gradientTransform="matrix(1 0 0 -1 0 314)"
>
<stop
offset={0}
style={{
stopColor: "#00FFA3",
}}
/>
<stop
offset={1}
style={{
stopColor: "#DC1FFF",
}}
/>
</linearGradient>
<path
className="st2"
d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"
/>
</svg>
);