109 lines
6.7 KiB
TypeScript
109 lines
6.7 KiB
TypeScript
|
import React from "react"
|
||
|
|
|
||
|
|
export default function Home() {
|
||
|
|
return (
|
||
|
|
<main className={`flex min-h-screen flex-col items-center justify-between`}>
|
||
|
|
<header className={`relative h-14 px-2 pl-7 py-2 w-full bg-neutral-900`}>
|
||
|
|
<LumeIndicator connected={true} className="z-10"/>
|
||
|
|
<div className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center">
|
||
|
|
<ProtocolIndicator />
|
||
|
|
<button className="absolute bg-neutral-700 text-neutral-400 px-4 py-2 right-0 rounded-r-full">
|
||
|
|
Navigate
|
||
|
|
<ArrowSvg className="inline-block ml-2 -mt-1 w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProtocolIndicator = ({className}: {className?: string}) => {
|
||
|
|
const [hover, setHover] = React.useState(false)
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onMouseEnter={() => setHover(true)}
|
||
|
|
onMouseLeave={() => setHover(false)}
|
||
|
|
className={`bg-white rounded-full ml-1 px-1 items-center justify-center flex overflow-hidden ${
|
||
|
|
hover ? "gap-x-1 pr-3" : "w-7"
|
||
|
|
} h-7 ${className}`}
|
||
|
|
>
|
||
|
|
<HandshakeLogo className="w-5 h-5" />
|
||
|
|
<span
|
||
|
|
className={`font-semibold text-[12px] text-neutral-950 transition-transform duration-150 transform-gpu ${
|
||
|
|
hover
|
||
|
|
? "translate-x-0 opacity-100"
|
||
|
|
: "w-0 opacity-0 -translate-x-[100px]"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
Handshake
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const LumeIndicator = ({ connected, className }: { className?: string, connected: boolean }) => {
|
||
|
|
const [hover, setHover] = React.useState(false)
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onMouseEnter={() => setHover(true)}
|
||
|
|
onMouseLeave={() => setHover(false)}
|
||
|
|
className={`absolute pr-3 p-2 h-10 left-0 flex items-center justify-center ${
|
||
|
|
connected ? "bg-primary" : "bg-neutral-300"
|
||
|
|
} hover:gap-x-2 rounded-r-full transition-all duration-150 ease-in-out ${
|
||
|
|
hover ? "w-[120px]" : "w-[20px]"
|
||
|
|
} ${className}`}
|
||
|
|
>
|
||
|
|
{connected ? <HandshakeLogo className={`w-5 h-5 text-black`} /> : null}
|
||
|
|
<span
|
||
|
|
className={`font-semibold text-[12px] text-neutral-950 transition-transform duration-150 transform-gpu ${
|
||
|
|
hover
|
||
|
|
? "translate-x-0 opacity-100"
|
||
|
|
: "w-0 opacity-0 -translate-x-[100px]"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{connected ? "On Lume" : "On HTTP "}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const HandshakeLogo = ({ className }: { className?: string }) => {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
className={className}
|
||
|
|
width="45"
|
||
|
|
height="47"
|
||
|
|
viewBox="0 0 45 47"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
d="M38.848 15.3309L35.9273 10.1424L41.5857 10.1441C41.7369 10.1441 41.9131 10.2446 41.9958 10.3804C42.086 10.5287 42.5454 11.2862 43.0974 12.1962C43.7581 13.2855 44.5482 14.5877 45 15.3309H38.848ZM28.3822 46.7545C28.2453 47 28.0674 47 28.0097 47H25.6979C24.4744 46.9992 23.0629 46.9983 22.2227 46.9983L31.2135 30.8571C31.363 30.589 31.3597 30.2622 31.2043 29.9974C31.049 29.7326 30.7667 29.57 30.461 29.57L15.137 29.5901L12.0902 24.3145H34.409C34.4106 24.3145 34.4123 24.3136 34.4148 24.3136C34.4173 24.3136 34.419 24.3145 34.4207 24.3145C34.4332 24.3145 34.4449 24.3103 34.4574 24.3094C34.5075 24.3061 34.5576 24.3011 34.6052 24.2893C34.642 24.281 34.6779 24.2692 34.7138 24.2558C34.733 24.2483 34.7514 24.2407 34.7698 24.2324C34.9368 24.1578 35.0846 24.0354 35.179 23.862L38.858 17.0604H44.9315L28.3822 46.7545ZM20.7252 46.1411C20.5298 45.8193 20.2759 45.4012 19.9994 44.9462C19.0699 43.4119 17.8789 41.4478 17.7444 41.2325C17.6993 41.1596 17.6785 40.9819 17.7728 40.8127C17.9883 40.4255 22.0573 33.0961 23.0487 31.3096L28.9903 31.302L20.7252 46.1411ZM10.5927 36.0398L7.63948 30.7926L10.6161 25.2127L13.6019 30.382C12.674 32.1291 11.2258 34.8541 10.5927 36.0398ZM6.6289 36.8567C5.12556 36.8567 3.63057 36.8559 3.41091 36.8559C3.26392 36.8559 3.08519 36.7528 3.00418 36.6204L2.04287 35.0359C1.35802 33.9064 0.48441 32.4659 0 31.6691H6.152L9.07183 36.8576C8.43458 36.8576 7.53257 36.8567 6.6289 36.8567ZM16.6178 0.246354C16.7547 0 16.9318 0 16.9894 0L22.8015 0.000837939L13.7865 16.1421C13.779 16.1555 13.7748 16.1697 13.7681 16.184C13.7547 16.2108 13.743 16.2384 13.7322 16.2669C13.723 16.2946 13.7146 16.3214 13.7071 16.349C13.7004 16.375 13.6946 16.401 13.6904 16.427C13.6854 16.4596 13.6821 16.4915 13.6812 16.5233C13.6804 16.5376 13.6771 16.551 13.6771 16.5661C13.6771 16.5769 13.6796 16.587 13.6804 16.5979C13.6812 16.6297 13.6846 16.6607 13.6896 16.6917C13.6929 16.7177 13.6971 16.7437 13.7038 16.7697C13.7105 16.7973 13.7197 16.8233 13.7288 16.8501C13.738 16.8761 13.7472 16.9029 13.7589 16.928C13.7706 16.9532 13.784 16.9766 13.7982 17.0009C13.8124 17.0244 13.8257 17.0479 13.8424 17.0705C13.8583 17.0931 13.8767 17.1141 13.8959 17.1359C13.9143 17.156 13.9326 17.1769 13.9527 17.1962C13.9727 17.2146 13.9936 17.2305 14.0153 17.2473C14.0395 17.2666 14.0638 17.2842 14.0896 17.3001C14.0997 17.306 14.1072 17.3135 14.1172 17.3194C14.1272 17.3252 14.1381 17.3269 14.1489 17.3319C14.1932 17.3546 14.24 17.3738 14.2893 17.3889C14.3068 17.3939 14.3235 17.4006 14.3419 17.4048C14.4045 17.4199 14.4688 17.4291 14.5365 17.4291C14.5373 17.4291 14.5373 17.43 14.5381 17.43H14.5398L14.9215 17.4291C14.9232 17.4291 14.9248 17.43 14.9265 17.43L29.8655 17.4099C30.2606 18.097 30.9989 19.3899 31.6278 20.491C32.1105 21.3373 32.5097 22.0353 32.8238 22.5841H10.5944C10.5844 22.5841 10.5752 22.5875 10.566 22.5883C10.2636 22.5933 9.97216 22.7534 9.81849 23.0408L6.13864 29.9387H0.0693207C2.71854 25.1843 16.4407 0.563095 16.6178 0.246354ZM24.2873 0.878998L24.8268 1.76721C25.7748 3.33081 27.1136 5.53794 27.2556 5.76753C27.3007 5.84043 27.3215 6.01724 27.2263 6.18734L21.9504 15.6904L16.0114 15.6979L24.2873 0.878998ZM34.4048 10.9544L37.3597 16.2041L34.3472 21.7722C33.988 21.1454 33.542 20.3644 33.1236 19.6312C32.2968 18.1824 31.6938 17.1275 31.3538 16.5376C31.9961 15.3619 33.694 12.2515 34.4048 10.9544Z"
|
||
|
|
fill="currentColor"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const ArrowSvg = ({ className }: { className?: string }) => {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
className={className}
|
||
|
|
width="15"
|
||
|
|
height="15"
|
||
|
|
viewBox="0 0 15 15"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
|
||
|
|
fill="currentColor"
|
||
|
|
fill-rule="evenodd"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
></path>
|
||
|
|
</svg>
|
||
|
|
)
|
||
|
|
}
|