Add home screen components
vinay kumar
parent
cf2d991d01
commit
4168f1a4b7
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_710" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="21">
|
||||||
|
<rect x="0.5" y="0.439453" width="20" height="20" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_710)">
|
||||||
|
<path d="M17.125 17.9395C15.3889 17.9395 13.6736 17.561 11.9792 16.804C10.2847 16.0471 8.74306 14.9742 7.35417 13.5853C5.96528 12.1964 4.89236 10.6547 4.13542 8.96029C3.37847 7.26584 3 5.55056 3 3.81445C3 3.56445 3.08333 3.35612 3.25 3.18945C3.41667 3.02279 3.625 2.93945 3.875 2.93945H7.25C7.44444 2.93945 7.61806 3.00543 7.77083 3.13737C7.92361 3.26931 8.01389 3.42556 8.04167 3.60612L8.58333 6.52279C8.61111 6.74501 8.60417 6.93251 8.5625 7.08529C8.52083 7.23806 8.44444 7.37001 8.33333 7.48112L6.3125 9.52279C6.59028 10.0367 6.92014 10.5332 7.30208 11.0124C7.68403 11.4915 8.10417 11.9533 8.5625 12.3978C8.99306 12.8283 9.44444 13.2276 9.91667 13.5957C10.3889 13.9638 10.8889 14.3006 11.4167 14.6061L13.375 12.6478C13.5 12.5228 13.6632 12.429 13.8646 12.3665C14.066 12.304 14.2639 12.2867 14.4583 12.3145L17.3333 12.8978C17.5278 12.9533 17.6875 13.054 17.8125 13.1999C17.9375 13.3457 18 13.5089 18 13.6895V17.0645C18 17.3145 17.9167 17.5228 17.75 17.6895C17.5833 17.8561 17.375 17.9395 17.125 17.9395ZM5.52083 7.93945L6.89583 6.56445L6.54167 4.60612H4.6875C4.75694 5.17556 4.85417 5.73806 4.97917 6.29362C5.10417 6.84918 5.28472 7.39779 5.52083 7.93945ZM12.9792 15.3978C13.5208 15.6339 14.0729 15.8214 14.6354 15.9603C15.1979 16.0992 15.7639 16.1895 16.3333 16.2311V14.3978L14.375 14.002L12.9792 15.3978Z" fill="#565F70"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_871" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
|
||||||
|
<rect width="20" height="20" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_871)">
|
||||||
|
<path d="M10.4997 10L7.24967 6.75002C7.0969 6.59724 7.02051 6.4028 7.02051 6.16669C7.02051 5.93058 7.0969 5.73613 7.24967 5.58335C7.40245 5.43058 7.5969 5.35419 7.83301 5.35419C8.06912 5.35419 8.26356 5.43058 8.41634 5.58335L12.2497 9.41669C12.333 9.50002 12.392 9.5903 12.4268 9.68752C12.4615 9.78474 12.4788 9.88891 12.4788 10C12.4788 10.1111 12.4615 10.2153 12.4268 10.3125C12.392 10.4097 12.333 10.5 12.2497 10.5834L8.41634 14.4167C8.26356 14.5695 8.06912 14.6459 7.83301 14.6459C7.5969 14.6459 7.40245 14.5695 7.24967 14.4167C7.0969 14.2639 7.02051 14.0695 7.02051 13.8334C7.02051 13.5972 7.0969 13.4028 7.24967 13.25L10.4997 10Z" fill="#565F70"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 956 B |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_2273" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
|
||||||
|
<rect y="0.439453" width="20" height="20" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_2273)">
|
||||||
|
<path d="M10.0007 11.6061L5.91732 15.6894C5.76454 15.8422 5.5701 15.9186 5.33398 15.9186C5.09787 15.9186 4.90343 15.8422 4.75065 15.6894C4.59787 15.5367 4.52148 15.3422 4.52148 15.1061C4.52148 14.87 4.59787 14.6756 4.75065 14.5228L8.83398 10.4394L4.75065 6.35611C4.59787 6.20334 4.52148 6.00889 4.52148 5.77278C4.52148 5.53667 4.59787 5.34223 4.75065 5.18945C4.90343 5.03667 5.09787 4.96028 5.33398 4.96028C5.5701 4.96028 5.76454 5.03667 5.91732 5.18945L10.0007 9.27278L14.084 5.18945C14.2368 5.03667 14.4312 4.96028 14.6673 4.96028C14.9034 4.96028 15.0979 5.03667 15.2507 5.18945C15.4034 5.34223 15.4798 5.53667 15.4798 5.77278C15.4798 6.00889 15.4034 6.20334 15.2507 6.35611L11.1673 10.4394L15.2507 14.5228C15.4034 14.6756 15.4798 14.87 15.4798 15.1061C15.4798 15.3422 15.4034 15.5367 15.2507 15.6894C15.0979 15.8422 14.9034 15.9186 14.6673 15.9186C14.4312 15.9186 14.2368 15.8422 14.084 15.6894L10.0007 11.6061Z" fill="#565F70"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_14_4161" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="21" height="20">
|
||||||
|
<rect x="10.168" y="10" width="20" height="20" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_14_4161)">
|
||||||
|
<path d="M14.3346 26.6667C13.8763 26.6667 13.4839 26.5035 13.1576 26.1771C12.8312 25.8507 12.668 25.4584 12.668 25V19.1667C12.668 18.1389 12.8659 17.1702 13.2617 16.2604C13.6576 15.3507 14.1957 14.5556 14.8763 13.875C15.5569 13.1945 16.352 12.6563 17.2617 12.2604C18.1714 11.8646 19.1402 11.6667 20.168 11.6667C21.1957 11.6667 22.1645 11.8646 23.0742 12.2604C23.9839 12.6563 24.7791 13.1945 25.4596 13.875C26.1402 14.5556 26.6784 15.3507 27.0742 16.2604C27.4701 17.1702 27.668 18.1389 27.668 19.1667V27.5C27.668 27.9584 27.5048 28.3507 27.1784 28.6771C26.852 29.0035 26.4596 29.1667 26.0013 29.1667H21.0013C20.7652 29.1667 20.5673 29.0868 20.4076 28.9271C20.2478 28.7674 20.168 28.5695 20.168 28.3334C20.168 28.0972 20.2478 27.8993 20.4076 27.7396C20.5673 27.5799 20.7652 27.5 21.0013 27.5H26.0013V26.6667H24.3346C23.8763 26.6667 23.4839 26.5035 23.1576 26.1771C22.8312 25.8507 22.668 25.4584 22.668 25V21.6667C22.668 21.2084 22.8312 20.816 23.1576 20.4896C23.4839 20.1632 23.8763 20 24.3346 20H26.0013V19.1667C26.0013 17.5556 25.4319 16.1806 24.293 15.0417C23.1541 13.9028 21.7791 13.3334 20.168 13.3334C18.5569 13.3334 17.1819 13.9028 16.043 15.0417C14.9041 16.1806 14.3346 17.5556 14.3346 19.1667V20H16.0013C16.4596 20 16.852 20.1632 17.1784 20.4896C17.5048 20.816 17.668 21.2084 17.668 21.6667V25C17.668 25.4584 17.5048 25.8507 17.1784 26.1771C16.852 26.5035 16.4596 26.6667 16.0013 26.6667H14.3346ZM14.3346 25H16.0013V21.6667H14.3346V25ZM24.3346 25H26.0013V21.6667H24.3346V25Z" fill="#565F70"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_88" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
|
||||||
|
<rect x="0.832031" y="0.370117" width="24" height="24" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_88)">
|
||||||
|
<path d="M12.832 17.3701C13.1154 17.3701 13.3529 17.2743 13.5445 17.0826C13.7362 16.891 13.832 16.6535 13.832 16.3701C13.832 16.0868 13.7362 15.8493 13.5445 15.6576C13.3529 15.466 13.1154 15.3701 12.832 15.3701C12.5487 15.3701 12.3112 15.466 12.1195 15.6576C11.9279 15.8493 11.832 16.0868 11.832 16.3701C11.832 16.6535 11.9279 16.891 12.1195 17.0826C12.3112 17.2743 12.5487 17.3701 12.832 17.3701ZM12.832 13.3701C13.1154 13.3701 13.3529 13.2743 13.5445 13.0826C13.7362 12.891 13.832 12.6535 13.832 12.3701V8.37012C13.832 8.08678 13.7362 7.84928 13.5445 7.65762C13.3529 7.46595 13.1154 7.37012 12.832 7.37012C12.5487 7.37012 12.3112 7.46595 12.1195 7.65762C11.9279 7.84928 11.832 8.08678 11.832 8.37012V12.3701C11.832 12.6535 11.9279 12.891 12.1195 13.0826C12.3112 13.2743 12.5487 13.3701 12.832 13.3701ZM12.832 22.3701C11.4487 22.3701 10.1487 22.1076 8.93203 21.5826C7.71536 21.0576 6.65703 20.3451 5.75703 19.4451C4.85703 18.5451 4.14453 17.4868 3.61953 16.2701C3.09453 15.0535 2.83203 13.7535 2.83203 12.3701C2.83203 10.9868 3.09453 9.68678 3.61953 8.47012C4.14453 7.25345 4.85703 6.19512 5.75703 5.29512C6.65703 4.39512 7.71536 3.68262 8.93203 3.15762C10.1487 2.63262 11.4487 2.37012 12.832 2.37012C14.2154 2.37012 15.5154 2.63262 16.732 3.15762C17.9487 3.68262 19.007 4.39512 19.907 5.29512C20.807 6.19512 21.5195 7.25345 22.0445 8.47012C22.5695 9.68678 22.832 10.9868 22.832 12.3701C22.832 13.7535 22.5695 15.0535 22.0445 16.2701C21.5195 17.4868 20.807 18.5451 19.907 19.4451C19.007 20.3451 17.9487 21.0576 16.732 21.5826C15.5154 22.1076 14.2154 22.3701 12.832 22.3701Z" fill="#D51D10"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_862" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
|
||||||
|
<rect width="24" height="24" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_862)">
|
||||||
|
<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#1249ED"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_2253" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="21">
|
||||||
|
<rect y="0.439453" width="20" height="20" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_2253)">
|
||||||
|
<path d="M3.33268 17.1061C2.87435 17.1061 2.48199 16.9429 2.1556 16.6165C1.82921 16.2901 1.66602 15.8978 1.66602 15.4395V5.43945C1.66602 4.98112 1.82921 4.58876 2.1556 4.26237C2.48199 3.93598 2.87435 3.77279 3.33268 3.77279H16.666C17.1243 3.77279 17.5167 3.93598 17.8431 4.26237C18.1695 4.58876 18.3327 4.98112 18.3327 5.43945V15.4395C18.3327 15.8978 18.1695 16.2901 17.8431 16.6165C17.5167 16.9429 17.1243 17.1061 16.666 17.1061H3.33268ZM16.666 7.10612L10.4368 11.002C10.3674 11.0436 10.2945 11.0749 10.2181 11.0957C10.1417 11.1165 10.0688 11.127 9.99935 11.127C9.9299 11.127 9.85699 11.1165 9.7806 11.0957C9.70421 11.0749 9.63129 11.0436 9.56185 11.002L3.33268 7.10612V15.4395H16.666V7.10612ZM9.99935 9.60612L16.666 5.43945H3.33268L9.99935 9.60612ZM3.33268 7.31445V6.08529V6.10612V6.0957V7.31445Z" fill="#565F70"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_71_56" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="25" height="25">
|
||||||
|
<rect x="0.832031" y="0.370117" width="24" height="24" fill="#D9D9D9"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_71_56)">
|
||||||
|
<path d="M12.832 17.3701C13.1154 17.3701 13.3529 17.2743 13.5445 17.0826C13.7362 16.891 13.832 16.6535 13.832 16.3701C13.832 16.0868 13.7362 15.8493 13.5445 15.6576C13.3529 15.466 13.1154 15.3701 12.832 15.3701C12.5487 15.3701 12.3112 15.466 12.1195 15.6576C11.9279 15.8493 11.832 16.0868 11.832 16.3701C11.832 16.6535 11.9279 16.891 12.1195 17.0826C12.3112 17.2743 12.5487 17.3701 12.832 17.3701ZM12.832 13.3701C13.1154 13.3701 13.3529 13.2743 13.5445 13.0826C13.7362 12.891 13.832 12.6535 13.832 12.3701V8.37012C13.832 8.08678 13.7362 7.84928 13.5445 7.65762C13.3529 7.46595 13.1154 7.37012 12.832 7.37012C12.5487 7.37012 12.3112 7.46595 12.1195 7.65762C11.9279 7.84928 11.832 8.08678 11.832 8.37012V12.3701C11.832 12.6535 11.9279 12.891 12.1195 13.0826C12.3112 13.2743 12.5487 13.3701 12.832 13.3701ZM12.832 22.3701C11.4487 22.3701 10.1487 22.1076 8.93203 21.5826C7.71536 21.0576 6.65703 20.3451 5.75703 19.4451C4.85703 18.5451 4.14453 17.4868 3.61953 16.2701C3.09453 15.0535 2.83203 13.7535 2.83203 12.3701C2.83203 10.9868 3.09453 9.68678 3.61953 8.47012C4.14453 7.25345 4.85703 6.19512 5.75703 5.29512C6.65703 4.39512 7.71536 3.68262 8.93203 3.15762C10.1487 2.63262 11.4487 2.37012 12.832 2.37012C14.2154 2.37012 15.5154 2.63262 16.732 3.15762C17.9487 3.68262 19.007 4.39512 19.907 5.29512C20.807 6.19512 21.5195 7.25345 22.0445 8.47012C22.5695 9.68678 22.832 10.9868 22.832 12.3701C22.832 13.7535 22.5695 15.0535 22.0445 16.2701C21.5195 17.4868 20.807 18.5451 19.907 19.4451C19.007 20.3451 17.9487 21.0576 16.732 21.5826C15.5154 22.1076 14.2154 22.3701 12.832 22.3701Z" fill="#8E4400"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M8.00952 0.938721C3.87962 0.938721 0.517615 4.29783 0.516115 8.42773C0.515365 9.74786 0.861137 11.0366 1.5167 12.1722L0.5 15.9402L4.4247 15.0128C5.51906 15.6099 6.751 15.9233 8.00513 15.9241H8.00806C12.1372 15.9241 15.4977 12.5642 15.5 8.43506C15.5015 6.43311 14.723 4.55087 13.3084 3.13474C11.8937 1.71935 10.0137 0.939471 8.00952 0.938721ZM8.00806 2.43887C9.61021 2.43962 11.1159 3.06428 12.2477 4.19539C13.3796 5.328 14.0014 6.83294 13.9999 8.43359C13.9984 11.7369 11.3114 14.4239 8.00659 14.4239C7.00674 14.4232 6.01634 14.1721 5.14401 13.6958L4.63859 13.4204L4.08043 13.5523L2.60372 13.9009L2.96411 12.5619L3.12672 11.9613L2.81614 11.4222C2.29259 10.5161 2.01551 9.48008 2.01626 8.42773C2.01776 5.12591 4.70548 2.43887 8.00806 2.43887ZM5.3579 4.97036C5.23263 4.97036 5.0301 5.01724 4.85834 5.20476C4.68657 5.39153 4.20202 5.84388 4.20202 6.76497C4.20202 7.68606 4.87299 8.57642 4.96674 8.70168C5.05975 8.8262 6.26187 10.7761 8.16481 11.5262C9.74596 12.1495 10.0671 12.0265 10.4106 11.995C10.7542 11.9642 11.5189 11.543 11.6749 11.1057C11.8309 10.6684 11.8313 10.2923 11.7848 10.215C11.7383 10.137 11.6134 10.0905 11.4259 9.99673C11.2391 9.90297 10.3187 9.45102 10.1469 9.38876C9.97517 9.32651 9.84953 9.295 9.72502 9.48252C9.60051 9.67004 9.24268 10.0905 9.13317 10.215C9.02366 10.3403 8.91488 10.3571 8.72737 10.2634C8.53985 10.1688 7.93693 9.97066 7.22136 9.33309C6.6648 8.83729 6.28926 8.22556 6.17975 8.03805C6.07099 7.85128 6.1695 7.74869 6.26326 7.65568C6.34727 7.57168 6.44931 7.43704 6.54307 7.32753C6.63608 7.21802 6.66833 7.14 6.73059 7.01548C6.79284 6.89097 6.76098 6.78109 6.71447 6.68733C6.66797 6.59357 6.30379 5.66906 6.13727 5.29852C5.997 4.98724 5.84887 4.98001 5.71535 4.97476C5.60659 4.97026 5.48241 4.97036 5.3579 4.97036Z" fill="#565F70"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,11 +1,11 @@
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import { StyleSheet } from 'react-native';
|
import { StyleSheet } from "react-native";
|
||||||
|
|
||||||
import { ExternalLink } from './ExternalLink';
|
import { ExternalLink } from "./ExternalLink";
|
||||||
import { MonoText } from './StyledText';
|
import { MonoText } from "./StyledText";
|
||||||
import { Text, View } from './Themed';
|
import { Text, View } from "./Themed";
|
||||||
|
|
||||||
import Colors from '@/constants/Colors';
|
import Colors from "@/constants/Colors";
|
||||||
|
|
||||||
export default function EditScreenInfo({ path }: { path: string }) {
|
export default function EditScreenInfo({ path }: { path: string }) {
|
||||||
return (
|
return (
|
||||||
|
|
@ -14,31 +14,37 @@ export default function EditScreenInfo({ path }: { path: string }) {
|
||||||
<Text
|
<Text
|
||||||
style={styles.getStartedText}
|
style={styles.getStartedText}
|
||||||
lightColor="rgba(0,0,0,0.8)"
|
lightColor="rgba(0,0,0,0.8)"
|
||||||
darkColor="rgba(255,255,255,0.8)">
|
darkColor="rgba(255,255,255,0.8)"
|
||||||
|
>
|
||||||
Open up the code for this screen:
|
Open up the code for this screen:
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<View
|
<View
|
||||||
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
|
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
|
||||||
darkColor="rgba(255,255,255,0.05)"
|
darkColor="rgba(255,255,255,0.05)"
|
||||||
lightColor="rgba(0,0,0,0.05)">
|
lightColor="rgba(0,0,0,0.05)"
|
||||||
|
>
|
||||||
<MonoText>{path}</MonoText>
|
<MonoText>{path}</MonoText>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Text
|
<Text
|
||||||
style={styles.getStartedText}
|
style={styles.getStartedText}
|
||||||
lightColor="rgba(0,0,0,0.8)"
|
lightColor="rgba(0,0,0,0.8)"
|
||||||
darkColor="rgba(255,255,255,0.8)">
|
darkColor="rgba(255,255,255,0.8)"
|
||||||
Change any of the text, save the file, and your app will automatically update.
|
>
|
||||||
|
Change any of the text, save the file, and your app will automatically
|
||||||
|
update.
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View style={styles.helpContainer}>
|
<View style={styles.helpContainer}>
|
||||||
<ExternalLink
|
<ExternalLink
|
||||||
style={styles.helpLink}
|
style={styles.helpLink}
|
||||||
href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet">
|
href="https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet"
|
||||||
|
>
|
||||||
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
|
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
|
||||||
Tap here if your app doesn't automatically update after making changes
|
Tap here if your app doesn't automatically update after making
|
||||||
|
changes
|
||||||
</Text>
|
</Text>
|
||||||
</ExternalLink>
|
</ExternalLink>
|
||||||
</View>
|
</View>
|
||||||
|
|
@ -48,7 +54,7 @@ export default function EditScreenInfo({ path }: { path: string }) {
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
getStartedContainer: {
|
getStartedContainer: {
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
marginHorizontal: 50,
|
marginHorizontal: 50,
|
||||||
},
|
},
|
||||||
homeScreenFilename: {
|
homeScreenFilename: {
|
||||||
|
|
@ -61,17 +67,17 @@ const styles = StyleSheet.create({
|
||||||
getStartedText: {
|
getStartedText: {
|
||||||
fontSize: 17,
|
fontSize: 17,
|
||||||
lineHeight: 24,
|
lineHeight: 24,
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
helpContainer: {
|
helpContainer: {
|
||||||
marginTop: 15,
|
marginTop: 15,
|
||||||
marginHorizontal: 20,
|
marginHorizontal: 20,
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
},
|
},
|
||||||
helpLink: {
|
helpLink: {
|
||||||
paddingVertical: 15,
|
paddingVertical: 15,
|
||||||
},
|
},
|
||||||
helpLinkText: {
|
helpLinkText: {
|
||||||
textAlign: 'center',
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,112 @@
|
||||||
|
import React from "react";
|
||||||
|
import { View, Text, StyleSheet, Pressable } from "react-native";
|
||||||
|
import ChevronRight from "../../assets/icons/chevron_rightside.svg";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
totalWarrantyYears: number; // in years
|
||||||
|
batteryPurchaseEpoch: number; // in seconds
|
||||||
|
};
|
||||||
|
|
||||||
|
const BatteryWarrantyCard: React.FC<Props> = ({
|
||||||
|
totalWarrantyYears,
|
||||||
|
batteryPurchaseEpoch,
|
||||||
|
}) => {
|
||||||
|
const totalWarrantyMs = totalWarrantyYears * 365.25 * 24 * 60 * 60 * 1000;
|
||||||
|
const purchaseDate = new Date(batteryPurchaseEpoch * 1000);
|
||||||
|
const now = new Date();
|
||||||
|
const elapsed = now.getTime() - purchaseDate.getTime();
|
||||||
|
const remaining = Math.max(totalWarrantyMs - elapsed, 0);
|
||||||
|
const progress = Math.min(elapsed / totalWarrantyMs, 1);
|
||||||
|
|
||||||
|
const remainingDate = new Date(remaining);
|
||||||
|
const yearsLeft = Math.floor(remaining / (365.25 * 24 * 60 * 60 * 1000));
|
||||||
|
const monthsLeft = Math.floor(
|
||||||
|
(remaining % (365.25 * 24 * 60 * 60 * 1000)) / (30.44 * 24 * 60 * 60 * 1000)
|
||||||
|
);
|
||||||
|
const daysLeft = Math.floor(
|
||||||
|
(remaining % (30.44 * 24 * 60 * 60 * 1000)) / (24 * 60 * 60 * 1000)
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.card}>
|
||||||
|
<View style={styles.topRow}>
|
||||||
|
<View style={styles.textColumn}>
|
||||||
|
<Text style={styles.title}>Battery Warranty Left</Text>
|
||||||
|
<Text style={styles.time}>
|
||||||
|
{`${yearsLeft} years, ${monthsLeft} month${
|
||||||
|
monthsLeft !== 1 ? "s" : ""
|
||||||
|
}, ${daysLeft} day${daysLeft !== 1 ? "s" : ""}`}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Pressable style={styles.iconButton}>
|
||||||
|
<ChevronRight />
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
<View style={styles.progressContainer}>
|
||||||
|
<View style={styles.progressBar}>
|
||||||
|
<View
|
||||||
|
style={[styles.progressFill, { width: `${(1 - progress) * 100}%` }]}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card: {
|
||||||
|
backgroundColor: "#FCFCFC",
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 16,
|
||||||
|
width: "100%",
|
||||||
|
height: 96,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
topRow: {
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
},
|
||||||
|
textColumn: {
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: "Inter-Medium",
|
||||||
|
color: "#565E70",
|
||||||
|
lineHeight: 16,
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: "Inter-SemiBold",
|
||||||
|
color: "#252A34",
|
||||||
|
lineHeight: 20,
|
||||||
|
},
|
||||||
|
iconButton: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
padding: 10,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
progressContainer: {
|
||||||
|
marginTop: 8,
|
||||||
|
width: "100%",
|
||||||
|
height: 8,
|
||||||
|
},
|
||||||
|
progressBar: {
|
||||||
|
width: "100%",
|
||||||
|
height: 8,
|
||||||
|
backgroundColor: "#E5E9F0",
|
||||||
|
borderRadius: 10,
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
|
progressFill: {
|
||||||
|
height: "100%",
|
||||||
|
backgroundColor: "#027A48",
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default BatteryWarrantyCard;
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
Pressable,
|
||||||
|
Linking,
|
||||||
|
Modal,
|
||||||
|
} from "react-native";
|
||||||
|
import WhatsappIcon from "../../assets/icons/whatsapp.svg";
|
||||||
|
import CallIcon from "../../assets/icons/call.svg";
|
||||||
|
import EmailIcon from "../../assets/icons/mail.svg";
|
||||||
|
import CloseIcon from "../../assets/icons/close.svg";
|
||||||
|
|
||||||
|
import { SUPPORT } from "@/constants/config";
|
||||||
|
import { StatusBar } from "expo-status-bar";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
visible: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const CustomerSupportModal: React.FC<Props> = ({ visible, onClose }) => {
|
||||||
|
const openWhatsApp = async () => {
|
||||||
|
const url = `https://wa.me/${
|
||||||
|
SUPPORT.WHATSAPP_NUMBER
|
||||||
|
}?text=${encodeURIComponent(SUPPORT.WHATSAPP_PLACEHOLDER)}`;
|
||||||
|
|
||||||
|
Linking.openURL(url).catch((err) =>
|
||||||
|
console.log("Failed to open WhatsApp:", err)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const makePhoneCall = () => {
|
||||||
|
Linking.openURL(`tel:${SUPPORT.PHONE}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendEmail = () => {
|
||||||
|
const url = `mailto:${SUPPORT.EMAIL}?subject=${encodeURIComponent(
|
||||||
|
SUPPORT.EMAIL_SUBJECT
|
||||||
|
)}&body=${encodeURIComponent(SUPPORT.EMAIL_BODY)}`;
|
||||||
|
Linking.openURL(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal visible={visible} animationType="fade" transparent>
|
||||||
|
<StatusBar style="dark" />
|
||||||
|
<View style={styles.overlay}>
|
||||||
|
<View style={styles.modalContainer}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<Text style={styles.headerText}>Customer Support</Text>
|
||||||
|
<Pressable onPress={onClose} style={styles.iconButton}>
|
||||||
|
<CloseIcon />
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<View style={styles.content}>
|
||||||
|
<View style={styles.row}>
|
||||||
|
<Pressable style={styles.secondaryButton} onPress={openWhatsApp}>
|
||||||
|
<WhatsappIcon />
|
||||||
|
<Text style={styles.buttonText}>Whatsapp</Text>
|
||||||
|
</Pressable>
|
||||||
|
<Pressable style={styles.secondaryButton} onPress={makePhoneCall}>
|
||||||
|
<CallIcon />
|
||||||
|
<Text style={styles.buttonText}>Call Us</Text>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
<Pressable
|
||||||
|
style={[styles.secondaryButton, styles.fullButton]}
|
||||||
|
onPress={sendEmail}
|
||||||
|
>
|
||||||
|
<EmailIcon />
|
||||||
|
<Text style={styles.buttonText}>Email</Text>
|
||||||
|
</Pressable>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CustomerSupportModal;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
overlay: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: "flex-end",
|
||||||
|
backgroundColor: "rgba(0,0,0,0.5)",
|
||||||
|
},
|
||||||
|
modalContainer: {
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
borderTopLeftRadius: 12,
|
||||||
|
borderTopRightRadius: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 16,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
height: 56,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: "#E5E9F0",
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
headerText: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "600",
|
||||||
|
color: "#252A34",
|
||||||
|
},
|
||||||
|
iconButton: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
padding: 10,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
paddingVertical: 16,
|
||||||
|
gap: 16,
|
||||||
|
},
|
||||||
|
row: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 16,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
},
|
||||||
|
secondaryButton: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
paddingVertical: 8,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 4,
|
||||||
|
backgroundColor: "#F3F5F8",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#D8DDE7",
|
||||||
|
width: 156,
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
fullButton: {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: "500",
|
||||||
|
color: "#252A34",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
import React from "react";
|
||||||
|
import { View, StyleSheet } from "react-native";
|
||||||
|
import MapView, { Marker } from "react-native-maps";
|
||||||
|
|
||||||
|
interface LocationMapProps {
|
||||||
|
latitude: number;
|
||||||
|
longitude: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LocationMap: React.FC<LocationMapProps> = ({ latitude, longitude }) => {
|
||||||
|
const region = {
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
latitudeDelta: 0.01,
|
||||||
|
longitudeDelta: 0.01,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<MapView style={styles.map} region={region}>
|
||||||
|
<Marker coordinate={{ latitude, longitude }} />
|
||||||
|
</MapView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
borderRadius: 10,
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
|
map: {
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default LocationMap;
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
import React from "react";
|
||||||
|
import { View, Text, StyleSheet } from "react-native";
|
||||||
|
|
||||||
|
interface MetricCardProps {
|
||||||
|
heading: string;
|
||||||
|
value: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const MetricCard: React.FC<MetricCardProps> = ({ heading, value }) => {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.textContainer}>
|
||||||
|
<Text style={styles.heading}>{heading}</Text>
|
||||||
|
<Text style={styles.value}>{value}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: 156,
|
||||||
|
height: 68,
|
||||||
|
backgroundColor: "#FCFCFC",
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: 12,
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
textContainer: {
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
heading: {
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 16,
|
||||||
|
color: "#565F70",
|
||||||
|
fontFamily: "Inter-Medium",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 20,
|
||||||
|
color: "#252A34",
|
||||||
|
fontFamily: "Inter-SemiBold",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MetricCard;
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
Dimensions,
|
||||||
|
} from "react-native";
|
||||||
|
import { MaterialIcons } from "@expo/vector-icons";
|
||||||
|
|
||||||
|
interface PaymentDueCardProps {
|
||||||
|
label: string;
|
||||||
|
amount: string;
|
||||||
|
onPress: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const PaymentDueCard: React.FC<PaymentDueCardProps> = ({
|
||||||
|
label,
|
||||||
|
amount,
|
||||||
|
onPress,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<View style={styles.leftSection}>
|
||||||
|
<View style={styles.iconWrapper}>
|
||||||
|
<MaterialIcons name="info-outline" size={20} color="#D92D20" />
|
||||||
|
</View>
|
||||||
|
<View style={styles.textGroup}>
|
||||||
|
<Text style={styles.label}>{label}</Text>
|
||||||
|
<Text style={styles.amount}>{amount}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.button}
|
||||||
|
onPress={onPress}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
<Text style={styles.buttonText}>Pay Now</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
backgroundColor: "#FCFCFC",
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 16,
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
width: "100%",
|
||||||
|
gap: 16,
|
||||||
|
},
|
||||||
|
leftSection: {
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
iconWrapper: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: "#FFEAEA",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
textGroup: {
|
||||||
|
marginLeft: 12,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: "#565F70",
|
||||||
|
fontFamily: "Inter-Medium",
|
||||||
|
marginBottom: 4,
|
||||||
|
},
|
||||||
|
amount: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#252A34",
|
||||||
|
fontFamily: "Inter-SemiBold",
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
backgroundColor: "#00825B",
|
||||||
|
paddingVertical: 8,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderRadius: 4,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
color: "#FCFCFC",
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: "Inter-Medium",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default PaymentDueCard;
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Text, TouchableOpacity, StyleSheet } from "react-native";
|
||||||
|
|
||||||
|
type ProfileImageProps = {
|
||||||
|
username: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
textSize?: number;
|
||||||
|
boxSize?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProfileImage: React.FC<ProfileImageProps> = ({
|
||||||
|
username,
|
||||||
|
onClick,
|
||||||
|
textSize,
|
||||||
|
boxSize,
|
||||||
|
}) => {
|
||||||
|
const firstLetter = username?.substring(0, 1)?.toUpperCase() || "V";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{ ...styles.container, width: boxSize, height: boxSize }}
|
||||||
|
onPress={onClick}
|
||||||
|
>
|
||||||
|
<Text style={{ ...styles.letter, fontSize: textSize }}>
|
||||||
|
{firstLetter}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProfileImage;
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
borderRadius: 394.316,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#DAF5ED",
|
||||||
|
},
|
||||||
|
letter: {
|
||||||
|
color: "#008761",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontWeight: "bold",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import { View, StyleSheet, Text, Animated } from "react-native";
|
||||||
|
import Svg, { Circle, Defs, LinearGradient, Stop } from "react-native-svg";
|
||||||
|
|
||||||
|
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||||
|
|
||||||
|
const CircleProgressBar = ({
|
||||||
|
progress,
|
||||||
|
status,
|
||||||
|
}: {
|
||||||
|
progress: number;
|
||||||
|
status: number;
|
||||||
|
}) => {
|
||||||
|
const radius = 20;
|
||||||
|
const strokeWidth = 5;
|
||||||
|
const viewBoxPadding = 4;
|
||||||
|
const viewBoxSize = (radius + strokeWidth) * 2 + viewBoxPadding;
|
||||||
|
const center = viewBoxSize / 2;
|
||||||
|
const circumference = 2 * Math.PI * radius;
|
||||||
|
|
||||||
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
||||||
|
const [displayProgress, setDisplayProgress] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (progress === undefined) {
|
||||||
|
animatedValue.setValue(0);
|
||||||
|
setDisplayProgress(0);
|
||||||
|
} else {
|
||||||
|
Animated.timing(animatedValue, {
|
||||||
|
toValue: progress,
|
||||||
|
duration: 500,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start();
|
||||||
|
}
|
||||||
|
}, [progress]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const listenerId = animatedValue.addListener(({ value }) => {
|
||||||
|
setDisplayProgress(Math.round(value));
|
||||||
|
});
|
||||||
|
return () => animatedValue.removeListener(listenerId);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getColor = (progress: number) => {
|
||||||
|
if (progress <= 20) return "#D51D10";
|
||||||
|
if (progress <= 50) return "#FF7B00";
|
||||||
|
return "#009E71";
|
||||||
|
};
|
||||||
|
|
||||||
|
const animatedColor = getColor(displayProgress);
|
||||||
|
|
||||||
|
const dashOffset = animatedValue.interpolate({
|
||||||
|
inputRange: [0, 100],
|
||||||
|
outputRange: [circumference, circumference - 0.7 * circumference],
|
||||||
|
});
|
||||||
|
|
||||||
|
const progressDashArray = `${circumference} ${circumference}`;
|
||||||
|
const backgroundDashArray = `${0.7 * circumference} ${0.3 * circumference}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<Svg
|
||||||
|
width={258.75}
|
||||||
|
height={258.75}
|
||||||
|
viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
|
||||||
|
style={styles.circleContainer}
|
||||||
|
>
|
||||||
|
<Defs>
|
||||||
|
<LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<Stop offset="0%" stopColor="#e66465" />
|
||||||
|
<Stop offset="100%" stopColor="#9198e5" />
|
||||||
|
</LinearGradient>
|
||||||
|
</Defs>
|
||||||
|
<Circle
|
||||||
|
r={radius}
|
||||||
|
cx={center}
|
||||||
|
cy={center}
|
||||||
|
stroke="#D8DDE7"
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
|
fill="none"
|
||||||
|
strokeDasharray={backgroundDashArray}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
<AnimatedCircle
|
||||||
|
r={radius}
|
||||||
|
cx={center}
|
||||||
|
cy={center}
|
||||||
|
fill="none"
|
||||||
|
strokeLinecap="round"
|
||||||
|
style={{
|
||||||
|
stroke: animatedColor,
|
||||||
|
strokeWidth: strokeWidth,
|
||||||
|
strokeDasharray: progressDashArray,
|
||||||
|
strokeDashoffset: dashOffset,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Svg>
|
||||||
|
<View style={styles.batteryPercent}>
|
||||||
|
<Text style={{ fontSize: 60, fontWeight: "bold", fontFamily: "Inter" }}>
|
||||||
|
{progress === undefined ? "---" : displayProgress}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ fontSize: 20, fontWeight: "bold" }}>
|
||||||
|
{progress === undefined ? null : "%"}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.batterySoc}>
|
||||||
|
<Text style={{ fontSize: 14, fontWeight: "bold", color: "#565F70" }}>
|
||||||
|
{status === 1 ? "Charging" : "Discharging"}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Keep the styles the same as before
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
position: "relative",
|
||||||
|
alignItems: "center",
|
||||||
|
},
|
||||||
|
circleContainer: {
|
||||||
|
transform: [{ rotate: "144deg" }],
|
||||||
|
},
|
||||||
|
batteryPercent: {
|
||||||
|
position: "absolute",
|
||||||
|
top: 80,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "baseline",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
},
|
||||||
|
batterySoc: {
|
||||||
|
position: "absolute",
|
||||||
|
top: 210,
|
||||||
|
justifyContent: "center",
|
||||||
|
transform: [{ translateX: 0 }],
|
||||||
|
},
|
||||||
|
batteryStatus: {
|
||||||
|
position: "absolute",
|
||||||
|
top: 300,
|
||||||
|
justifyContent: "center",
|
||||||
|
transform: [{ translateX: 0 }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default CircleProgressBar;
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
ViewStyle,
|
||||||
|
} from "react-native";
|
||||||
|
import Feather from "../../assets/icons/chevron_rightside.svg";
|
||||||
|
import { ALERT_STYLES } from "@/constants/config";
|
||||||
|
|
||||||
|
type AlertType = "info" | "warning" | "danger";
|
||||||
|
|
||||||
|
interface AlertCardProps {
|
||||||
|
type: AlertType;
|
||||||
|
message: string;
|
||||||
|
subMessage?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AlertCard: React.FC<AlertCardProps> = ({ type, message, subMessage }) => {
|
||||||
|
const style = ALERT_STYLES[type];
|
||||||
|
|
||||||
|
const containerStyle: ViewStyle[] = [
|
||||||
|
styles.container,
|
||||||
|
{ backgroundColor: style.backgroundColor },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={[containerStyle, { backgroundColor: style.backgroundColor }]}
|
||||||
|
activeOpacity={0.9}
|
||||||
|
>
|
||||||
|
<View style={styles.leftContent}>
|
||||||
|
<style.icon />
|
||||||
|
<View style={styles.textContainer}>
|
||||||
|
<Text style={styles.text}>
|
||||||
|
<Text style={styles.boldText}>{message}</Text>
|
||||||
|
{subMessage ? `\n${subMessage}` : ""}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Feather />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
leftContent: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
container: {
|
||||||
|
flexDirection: "row",
|
||||||
|
backgroundColor: "#E5EBFD",
|
||||||
|
borderRadius: 8,
|
||||||
|
padding: 8,
|
||||||
|
width: "100%",
|
||||||
|
alignSelf: "center",
|
||||||
|
alignItems: "flex-start",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
height: 60,
|
||||||
|
marginHorizontal: 16,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flexDirection: "row",
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
textContainer: {
|
||||||
|
marginLeft: 8,
|
||||||
|
justifyContent: "center",
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: "#252A34",
|
||||||
|
fontSize: 14,
|
||||||
|
lineHeight: 20,
|
||||||
|
fontFamily: "Inter-Regular",
|
||||||
|
},
|
||||||
|
boldText: {
|
||||||
|
fontWeight: "500",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AlertCard;
|
||||||
|
|
@ -6,11 +6,21 @@ import ServiceIcon from "../assets/icons/service.svg";
|
||||||
import ServiceIconFilled from "../assets/icons/service-filled.svg";
|
import ServiceIconFilled from "../assets/icons/service-filled.svg";
|
||||||
import BatteryIcon from "../assets/icons/battery.svg";
|
import BatteryIcon from "../assets/icons/battery.svg";
|
||||||
import BatteryIconFilled from "../assets/icons/battery-filled.svg";
|
import BatteryIconFilled from "../assets/icons/battery-filled.svg";
|
||||||
|
import { BASE_URL, ENV } from "@env";
|
||||||
|
import InfoIcon from "../assets/icons/error.svg";
|
||||||
|
import WarningIcon from "../assets/icons/warning.svg";
|
||||||
|
import DangerIcon from "../assets/icons/danger.svg";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
ENV,
|
||||||
|
BASE_URL,
|
||||||
|
};
|
||||||
|
|
||||||
export const STORAGE_KEYS = {
|
export const STORAGE_KEYS = {
|
||||||
LANGUAGE: "USER_LANGUAGE",
|
LANGUAGE: "userLanguage",
|
||||||
TOKEN: "AUTH_TOKEN",
|
AUTH_TOKEN: "authToken",
|
||||||
THEME: "APP_THEME",
|
THEME: "appTheme",
|
||||||
|
REFRESH_TOKEN: "refreshToken",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const APP_CONFIG = {
|
export const APP_CONFIG = {
|
||||||
|
|
@ -48,3 +58,43 @@ export const TAB_CONFIG = [
|
||||||
path: "/my-battery",
|
path: "/my-battery",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const MESSAGES = {
|
||||||
|
AUTHENTICATION: {
|
||||||
|
INVALID_TOKEN: "Invalid Token",
|
||||||
|
VERIFICATION_FAILED: "Verification failed, try again later",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AUTH_STATUSES = {
|
||||||
|
IDLE: "Idle",
|
||||||
|
LOADING: "Loading",
|
||||||
|
SUCCESS: "Success",
|
||||||
|
FAILED: "Failed",
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const ALERT_STYLES = {
|
||||||
|
info: {
|
||||||
|
backgroundColor: "#E5EBFD",
|
||||||
|
icon: InfoIcon,
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
backgroundColor: "#FFF2E2",
|
||||||
|
icon: WarningIcon,
|
||||||
|
},
|
||||||
|
danger: {
|
||||||
|
backgroundColor: "#FFE9E9",
|
||||||
|
icon: DangerIcon,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SUPPORT = {
|
||||||
|
WHATSAPP_NUMBER: "918685846459",
|
||||||
|
WHATSAPP_PLACEHOLDER: "Hi, I need help regarding my vehicle.",
|
||||||
|
PHONE: "+911234567890",
|
||||||
|
EMAIL: "support@vecmocon.com",
|
||||||
|
EMAIL_SUBJECT: "Support Request",
|
||||||
|
EMAIL_BODY: "Hello,\n\nI need assistance with...",
|
||||||
|
};
|
||||||
|
|
||||||
|
export type StatusType = (typeof AUTH_STATUSES)[keyof typeof AUTH_STATUSES];
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue