reactbits-mcp-server
Version:
MCP Server for React Bits - Access 99+ React components with animations, backgrounds, and UI elements
59 lines (50 loc) • 13.7 kB
JSX
import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
export const Logo = () => {
const svgRef = useRef(null)
const atomRef = useRef(null)
useEffect(() => {
const svgEl = svgRef.current
const atomEl = atomRef.current
if (!svgEl || !atomEl) return
gsap.set(atomEl, { transformOrigin: 'center center' })
const handleEnter = () =>
gsap.to(atomEl, { rotation: 20, scale: 0.95, duration: 1, ease: 'elastic.out(1, 0.3)' })
const handleLeave = () =>
gsap.to(atomEl, { rotation: 0, scale: 1, duration: 1, ease: 'elastic.out(2, 1)' })
svgEl.addEventListener('mouseenter', handleEnter)
svgEl.addEventListener('mouseleave', handleLeave)
return () => {
svgEl.removeEventListener('mouseenter', handleEnter)
svgEl.removeEventListener('mouseleave', handleLeave)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return (
<svg
ref={svgRef}
width="115"
height="23"
viewBox="0 0 115 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style={{ cursor: 'pointer' }}
>
<path
ref={atomRef}
className="atom"
d="M15.6317 0.571987C16.3759 0.228574 17.2363 0.0550841 18.033 0.38644L18.1922 0.459682L18.1942 0.460659L18.41 0.587612C18.8912 0.905222 19.2097 1.37902 19.407 1.8923C19.602 2.39947 19.6967 2.98342 19.7195 3.60226L19.7244 3.86886L19.7293 4.82101L17.825 4.83078L17.8201 3.87863L17.8045 3.47042C17.7767 3.09113 17.7136 2.79437 17.6297 2.57589C17.5217 2.29489 17.4024 2.19635 17.3289 2.15792L17.284 2.13937C17.1618 2.09871 16.9051 2.08256 16.4305 2.30148C15.8996 2.5465 15.2436 3.02482 14.5086 3.74874C13.7215 4.524 12.8888 5.53694 12.0692 6.73507C12.2359 6.73273 12.4038 6.73019 12.5721 6.73019C15.8011 6.73022 18.765 7.16566 20.9539 7.89523C22.0431 8.25833 22.9938 8.71183 23.6912 9.26144C24.3778 9.80264 24.9519 10.5493 24.952 11.4919C24.9519 12.3043 24.5214 12.9748 23.9715 13.4831C23.4218 13.9912 22.6749 14.416 21.824 14.7673L20.9432 15.1306L20.2166 13.3698L21.0975 13.0066C21.833 12.7029 22.3554 12.3832 22.6785 12.0847C23.0011 11.7865 23.0476 11.5861 23.0477 11.4919C23.0476 11.3827 22.9814 11.1272 22.5125 10.7575C22.0535 10.3958 21.3298 10.028 20.3514 9.70187C18.4042 9.05287 15.6534 8.6355 12.5721 8.63546C11.9839 8.63546 11.4073 8.65026 10.8465 8.67941C10.5662 9.16529 10.292 9.6716 10.0252 10.195C9.8036 10.6298 9.59539 11.0625 9.40021 11.49C9.59576 11.9183 9.80411 12.3521 10.0262 12.7878H10.0272L10.2918 13.2976C11.6276 15.814 13.1379 17.8859 14.5086 19.236C15.2432 19.9595 15.8989 20.4376 16.4295 20.6823C16.9715 20.9322 17.23 20.8755 17.3279 20.8259L17.4061 20.7712C17.4946 20.6921 17.6094 20.5285 17.699 20.1902C17.8183 19.7396 17.8576 19.0916 17.7781 18.2556C17.6198 16.5909 17.0111 14.39 15.9705 12.0017L16.8436 11.6218L17.7166 11.2409C18.809 13.7484 19.4914 16.1499 19.6746 18.0749C19.7658 19.0336 19.7391 19.9287 19.5408 20.6775C19.343 21.4244 18.9388 22.1417 18.1932 22.5222L18.1922 22.5232C17.3525 22.9505 16.4266 22.7778 15.6326 22.4118C14.8262 22.04 13.9897 21.3992 13.1717 20.5935C11.5669 19.0128 9.8785 16.6456 8.43536 13.8562C7.94269 15.2332 7.60957 16.5119 7.44415 17.611C7.29073 18.6308 7.29006 19.4422 7.40411 20.0153C7.52086 20.6015 7.71887 20.7763 7.81622 20.8259H7.8172L7.88947 20.8523C8.09827 20.9026 8.58562 20.8602 9.46173 20.239L10.2381 19.6882L11.3397 21.2419L10.5633 21.7927L10.3582 21.9323C9.31984 22.6214 8.06557 23.0899 6.95197 22.5222V22.5232C6.11192 22.0955 5.70676 21.2449 5.53595 20.3874C5.36259 19.5163 5.38948 18.4625 5.56036 17.3269C5.81724 15.6203 6.41817 13.6025 7.31818 11.49C6.99301 10.7266 6.7076 9.97508 6.46271 9.24679C5.85761 9.38078 5.298 9.53349 4.79279 9.70187C3.81426 10.028 3.09071 10.3958 2.63165 10.7575C2.16243 11.1274 2.09658 11.3827 2.0965 11.4919C2.09671 11.6513 2.25906 12.068 3.17462 12.5876L3.36798 12.6921L4.21271 13.1335L3.3299 14.822L2.48615 14.3806L2.2674 14.2614C1.17979 13.6487 0.192367 12.742 0.1922 11.4919C0.192288 10.5492 0.766185 9.80266 1.45294 9.26144C2.15046 8.7118 3.10094 8.25834 4.19025 7.89523C4.72343 7.71753 5.30301 7.55645 5.92072 7.41574C5.76557 6.80139 5.64509 6.21178 5.56134 5.65597C5.39035 4.52081 5.36283 3.46829 5.53595 2.59738C5.70654 1.7396 6.11162 0.888515 6.95197 0.460659V0.461635C7.83252 0.0128116 8.80234 0.2186 9.65021 0.63937L10.0057 0.831752L10.8279 1.31222L9.86603 2.95675L9.04376 2.47628L8.78009 2.33371C8.20699 2.05202 7.91997 2.1051 7.81622 2.15792V2.1589C7.71887 2.20847 7.52073 2.38226 7.40411 2.96847C7.29019 3.54153 7.29149 4.35303 7.44513 5.37277C7.52452 5.89955 7.64219 6.46785 7.79767 7.06808C8.41596 6.97652 9.06014 6.90151 9.72443 6.8464C10.8365 5.04912 12.0257 3.5201 13.1717 2.39132C13.9899 1.58545 14.8252 0.944189 15.6317 0.571987ZM17.7166 11.2409L15.9705 12.0017L15.5906 11.1286L17.3367 10.3679L17.7166 11.2409ZM8.4422 7.94406C7.87898 7.94428 7.42287 8.40036 7.42267 8.96359C7.42267 9.52698 7.87886 9.98388 8.4422 9.9841C9.00573 9.9841 9.46271 9.52712 9.46271 8.96359C9.46251 8.40023 9.00561 7.94406 8.4422 7.94406Z"
fill="white"
/>
<path d="M33.5883 17.3539V4.68017H38.2209C39.3025 4.68017 40.1886 4.84916 40.8793 5.18712C41.5699 5.52509 42.0781 5.97772 42.4039 6.54502C42.7427 7.10025 42.9121 7.73394 42.9121 8.44608C42.9121 9.12202 42.7427 9.74967 42.4039 10.329C42.0781 10.8963 41.5634 11.355 40.8597 11.705C40.156 12.043 39.2569 12.212 38.1622 12.212H35.5429V17.3539H33.5883ZM40.7815 17.3539L37.8299 11.7232H39.9801L43.049 17.3539H40.7815ZM35.5429 10.836H38.0841C39.0484 10.836 39.7586 10.6187 40.2147 10.1842C40.6708 9.7376 40.8988 9.1703 40.8988 8.4823C40.8988 7.78222 40.6773 7.22699 40.2342 6.8166C39.7911 6.40622 39.0744 6.20102 38.0841 6.20102H35.5429V10.836Z" fill="white" />
<path d="M48.2323 17.5712C47.294 17.5712 46.46 17.372 45.7303 16.9737C45.0005 16.5754 44.4271 16.0202 44.0101 15.308C43.6062 14.5959 43.4042 13.7691 43.4042 12.8276C43.4042 11.862 43.6062 11.0231 44.0101 10.3109C44.4271 9.58672 45.0005 9.02546 45.7303 8.62714C46.46 8.21675 47.307 8.01156 48.2714 8.01156C49.2357 8.01156 50.0632 8.21072 50.7538 8.60903C51.4445 9.00735 51.9788 9.53844 52.3567 10.2023C52.7346 10.8541 52.9235 11.5783 52.9235 12.3749C52.9235 12.4956 52.917 12.6284 52.904 12.7733C52.904 12.906 52.8975 13.0569 52.8844 13.2259H44.8311V11.9404H50.9688C50.9297 11.18 50.6561 10.5886 50.1479 10.1661C49.6396 9.73156 49.0076 9.5143 48.2518 9.5143C47.7175 9.5143 47.2289 9.62897 46.7858 9.8583C46.3427 10.0756 45.9844 10.4015 45.7107 10.836C45.4501 11.2584 45.3198 11.7956 45.3198 12.4474V12.9543C45.3198 13.6302 45.4501 14.2036 45.7107 14.6743C45.9844 15.133 46.3427 15.483 46.7858 15.7244C47.2289 15.9538 47.711 16.0684 48.2323 16.0684C48.8578 16.0684 49.3725 15.9417 49.7765 15.6882C50.1804 15.4347 50.4802 15.0907 50.6756 14.6562H52.6303C52.4609 15.2114 52.1742 15.7124 51.7703 16.159C51.3663 16.5935 50.8646 16.9375 50.2651 17.191C49.6787 17.4444 49.0011 17.5712 48.2323 17.5712Z" fill="white" />
<path d="M57.3822 17.5712C56.5743 17.5712 55.9032 17.4444 55.3689 17.191C54.8346 16.9375 54.4371 16.5995 54.1765 16.1771C53.9159 15.7425 53.7856 15.2778 53.7856 14.783C53.7856 14.1794 53.955 13.6665 54.2938 13.244C54.6326 12.8095 55.1148 12.4775 55.7403 12.2482C56.3658 12.0189 57.1151 11.9042 57.9882 11.9042H60.5488C60.5488 11.3731 60.4641 10.9326 60.2947 10.5825C60.1253 10.2325 59.8712 9.97297 59.5324 9.80399C59.2066 9.62293 58.7896 9.53241 58.2814 9.53241C57.695 9.53241 57.1933 9.66518 56.7763 9.93072C56.3593 10.1842 56.0986 10.5644 55.9944 11.0714H54.0397C54.1179 10.4316 54.3524 9.88848 54.7434 9.44188C55.1473 8.98321 55.6621 8.63317 56.2876 8.39177C56.9131 8.13829 57.5777 8.01156 58.2814 8.01156C59.2066 8.01156 59.982 8.16243 60.6075 8.46419C61.233 8.76595 61.7021 9.19444 62.0148 9.74967C62.3406 10.2928 62.5035 10.9446 62.5035 11.705V17.3539H60.8029L60.6465 15.815C60.5032 16.0564 60.3338 16.2857 60.1383 16.503C59.9429 16.7202 59.7083 16.9073 59.4346 17.0642C59.174 17.2211 58.8678 17.3418 58.5159 17.4263C58.1771 17.5229 57.7992 17.5712 57.3822 17.5712ZM57.7536 16.1046C58.1706 16.1046 58.5485 16.0262 58.8873 15.8693C59.2261 15.7124 59.5128 15.5011 59.7474 15.2356C59.995 14.958 60.1774 14.6502 60.2947 14.3122C60.425 13.9622 60.4967 13.6061 60.5097 13.244V13.1897H58.1836C57.6233 13.1897 57.1672 13.2561 56.8154 13.3888C56.4765 13.5095 56.2289 13.6785 56.0726 13.8958C55.9162 14.1131 55.838 14.3665 55.838 14.6562C55.838 14.958 55.9097 15.2175 56.053 15.4347C56.2094 15.6399 56.4309 15.8029 56.7176 15.9236C57.0043 16.0443 57.3496 16.1046 57.7536 16.1046Z" fill="white" />
<path d="M68.5756 17.5712C67.6243 17.5712 66.7773 17.372 66.0345 16.9737C65.2917 16.5633 64.7053 16.0021 64.2753 15.2899C63.8583 14.5778 63.6498 13.751 63.6498 12.8095C63.6498 11.8559 63.8583 11.0231 64.2753 10.3109C64.7053 9.58672 65.2917 9.02546 66.0345 8.62714C66.7773 8.21675 67.6243 8.01156 68.5756 8.01156C69.7745 8.01156 70.7779 8.30124 71.5858 8.88061C72.3937 9.45998 72.9085 10.2445 73.13 11.2343H71.0971C70.9668 10.7032 70.6671 10.2928 70.198 10.0031C69.7419 9.71346 69.1946 9.56862 68.556 9.56862C68.0348 9.56862 67.5526 9.69535 67.1096 9.94883C66.6665 10.1902 66.3081 10.5523 66.0345 11.0351C65.7739 11.5059 65.6435 12.0913 65.6435 12.7914C65.6435 13.3104 65.7217 13.7751 65.8781 14.1855C66.0345 14.5838 66.243 14.9218 66.5036 15.1994C66.7773 15.477 67.09 15.6882 67.4419 15.8331C67.7937 15.9658 68.1651 16.0322 68.556 16.0322C68.9861 16.0322 69.3705 15.9719 69.7093 15.8512C70.0611 15.7184 70.3543 15.5253 70.5889 15.2718C70.8365 15.0183 71.0059 14.7166 71.0971 14.3665H73.13C72.9085 15.3322 72.3937 16.1107 71.5858 16.7021C70.7779 17.2815 69.7745 17.5712 68.5756 17.5712Z" fill="white" />
<path d="M78.2956 17.3539C77.6701 17.3539 77.1293 17.2634 76.6732 17.0823C76.2171 16.9013 75.8653 16.5995 75.6177 16.1771C75.3701 15.7546 75.2463 15.1813 75.2463 14.4571V9.76777H73.5457V8.22882H75.2463L75.4808 5.94755H77.201V8.22882H79.9962V9.76777H77.201V14.4752C77.201 14.9942 77.3182 15.3503 77.5528 15.5434C77.7874 15.7244 78.1913 15.815 78.7647 15.815H79.8984V17.3539H78.2956Z" fill="white" />
<path d="M85.296 17.3539V4.68017H90.3586C91.3099 4.68017 92.1048 4.82501 92.7434 5.1147C93.3819 5.39232 93.8575 5.77856 94.1703 6.27344C94.4961 6.75625 94.659 7.30545 94.659 7.92103C94.659 8.56075 94.5091 9.09788 94.2094 9.53241C93.9097 9.96693 93.5122 10.3049 93.017 10.5463C92.5349 10.7756 92.0136 10.9084 91.4533 10.9446L91.7269 10.7636C92.3264 10.7756 92.8737 10.9265 93.3689 11.2162C93.8641 11.4938 94.255 11.868 94.5417 12.3387C94.8284 12.8095 94.9717 13.3285 94.9717 13.8958C94.9717 14.5476 94.8023 15.139 94.4635 15.6701C94.1247 16.1891 93.623 16.5995 92.9584 16.9013C92.2938 17.203 91.4793 17.3539 90.515 17.3539H85.296ZM87.2507 15.8512H90.2609C91.121 15.8512 91.7856 15.6701 92.2547 15.308C92.7369 14.9338 92.9779 14.4088 92.9779 13.7328C92.9779 13.069 92.7303 12.5379 92.2351 12.1396C91.753 11.7413 91.0819 11.5421 90.2218 11.5421H87.2507V15.8512ZM87.2507 10.148H90.1436C90.9646 10.148 91.5901 9.97297 92.0201 9.62293C92.4502 9.26083 92.6652 8.76595 92.6652 8.13829C92.6652 7.53478 92.4502 7.05801 92.0201 6.70797C91.5901 6.34586 90.9451 6.16481 90.085 6.16481H87.2507V10.148Z" fill="white" />
<path d="M96.3646 17.3539V8.22882H98.3193V17.3539H96.3646ZM97.3615 6.50881C96.9836 6.50881 96.6708 6.40018 96.4232 6.18292C96.1887 5.96565 96.0714 5.68804 96.0714 5.35007C96.0714 5.02417 96.1887 4.75863 96.4232 4.55344C96.6708 4.33617 96.9836 4.22754 97.3615 4.22754C97.7264 4.22754 98.0326 4.33617 98.2802 4.55344C98.5278 4.75863 98.6516 5.02417 98.6516 5.35007C98.6516 5.68804 98.5278 5.96565 98.2802 6.18292C98.0326 6.40018 97.7264 6.50881 97.3615 6.50881Z" fill="white" />
<path d="M104.203 17.3539C103.577 17.3539 103.037 17.2634 102.581 17.0823C102.124 16.9013 101.773 16.5995 101.525 16.1771C101.277 15.7546 101.154 15.1813 101.154 14.4571V9.76777H99.453V8.22882H101.154L101.388 5.94755H103.108V8.22882H105.903V9.76777H103.108V14.4752C103.108 14.9942 103.226 15.3503 103.46 15.5434C103.695 15.7244 104.099 15.815 104.672 15.815H105.806V17.3539H104.203Z" fill="white" />
<path d="M110.893 17.5712C110.059 17.5712 109.33 17.4444 108.704 17.191C108.079 16.9375 107.583 16.5814 107.218 16.1228C106.854 15.6641 106.632 15.127 106.554 14.5114H108.548C108.613 14.8011 108.737 15.0666 108.919 15.308C109.115 15.5494 109.375 15.7425 109.701 15.8874C110.04 16.0322 110.437 16.1046 110.893 16.1046C111.323 16.1046 111.675 16.0503 111.949 15.9417C112.236 15.821 112.444 15.6641 112.574 15.471C112.705 15.2658 112.77 15.0485 112.77 14.8192C112.77 14.4812 112.679 14.2277 112.496 14.0587C112.327 13.8777 112.066 13.7389 111.714 13.6423C111.375 13.5337 110.965 13.4371 110.483 13.3526C110.027 13.2802 109.584 13.1837 109.154 13.0629C108.737 12.9302 108.359 12.7672 108.02 12.5741C107.694 12.381 107.433 12.1396 107.238 11.8499C107.043 11.5481 106.945 11.18 106.945 10.7455C106.945 10.2264 107.095 9.76174 107.394 9.35135C107.694 8.92889 108.118 8.603 108.665 8.37366C109.225 8.13226 109.883 8.01156 110.639 8.01156C111.734 8.01156 112.613 8.25296 113.278 8.73577C113.943 9.21858 114.334 9.90055 114.451 10.7817H112.555C112.503 10.3713 112.307 10.0575 111.968 9.8402C111.63 9.61086 111.18 9.4962 110.62 9.4962C110.059 9.4962 109.629 9.59879 109.33 9.80399C109.03 10.0092 108.88 10.2808 108.88 10.6187C108.88 10.836 108.965 11.0291 109.134 11.1981C109.303 11.3671 109.551 11.5119 109.877 11.6326C110.216 11.7413 110.626 11.8439 111.108 11.9404C111.799 12.0611 112.418 12.212 112.965 12.3931C113.513 12.5741 113.949 12.8396 114.275 13.1897C114.601 13.5397 114.764 14.0406 114.764 14.6924C114.777 15.2597 114.62 15.7606 114.294 16.1952C113.982 16.6297 113.532 16.9677 112.946 17.2091C112.372 17.4505 111.688 17.5712 110.893 17.5712Z" fill="white" />
</svg>
)
}