@@ -45,59 +45,101 @@ const baseClasses = `relative ${variant === "eName" ? "bg-black-900" : variant =
4545 </script >
4646
4747<div {...restProps } class ={cn (baseClasses , restProps .class )}>
48- <div class =" w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20" >
49- <div class ="w-10 {variant === ' eVault' ? " bg-white/40" : " bg-white/10" } h-[300%] rotate-40" ></div >
50- <div class ="w-10 {variant === ' eVault' ? " bg-white/40" : " bg-white/10" } h-[300%] rotate-40" ></div >
48+ <div
49+ class =" w-full h-full pointer-events-none flex gap-13 justify-end absolute right-15 bottom-20"
50+ >
51+ <div
52+ class ="w-10 {variant === ' eVault'
53+ ? ' bg-white/40'
54+ : ' bg-white/10' } h-[300%] rotate-40"
55+ ></div >
56+ <div
57+ class ="w-10 {variant === ' eVault'
58+ ? ' bg-white/40'
59+ : ' bg-white/10' } h-[300%] rotate-40"
60+ ></div >
5161 </div >
5262 <div class =" p-5 flex flex-col gap-2" >
5363 <div class =" flex justify-between" >
54- {#if variant === ' eName' }
55- <HugeiconsIcon size ={30 } strokeWidth ={2 } className ="text-secondary" icon ={CheckmarkBadge02Icon } />
56- <div class =" flex gap-3 items-center" >
57- {#if shareBtn }
58- <Button .Icon icon ={Upload03Icon } iconColor ={" white" } strokeWidth ={2 } onclick ={shareBtn } />
64+ {#if variant === " eName" }
65+ <HugeiconsIcon
66+ size ={30 }
67+ strokeWidth ={2 }
68+ className =" text-secondary"
69+ icon ={CheckmarkBadge02Icon }
70+ />
71+ <div class =" flex gap-3 items-center" >
72+ {#if shareBtn }
73+ <Button .Icon
74+ icon ={Upload03Icon }
75+ iconColor ={" white" }
76+ strokeWidth ={2 }
77+ onclick ={shareBtn }
78+ />
5979 {/if }
6080 {#if viewBtn }
61- <Button .Icon icon ={ViewIcon } iconColor ={" white" } strokeWidth ={2 } onclick ={viewBtn } />
81+ <Button .Icon
82+ icon ={ViewIcon }
83+ iconColor ={" white" }
84+ strokeWidth ={2 }
85+ onclick ={viewBtn }
86+ />
6287 {/if }
63- </div >
64- {:else if variant === ' ePassport' }
65- <p class =" bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium" >HIGH SECURITY</p >
88+ </div >
89+ {:else if variant === " ePassport" }
90+ <p
91+ class =" bg-white text-black flex items-center leading-0 justify-center rounded-full h-7 px-5 text-xs font-medium"
92+ >
93+ HIGH SECURITY
94+ </p >
6695 {#if viewBtn }
67- <Button .Icon icon ={ViewIcon } iconColor ={" white" } strokeWidth ={2 } onclick ={viewBtn } />
96+ <Button .Icon
97+ icon ={ViewIcon }
98+ iconColor ={" white" }
99+ strokeWidth ={2 }
100+ onclick ={viewBtn }
101+ />
68102 {/if }
69- {:else if variant === ' eVault' }
70- <h3 class ="text-black-300 text-3xl font-semibold mb-3 z-[1]" >{state .progressWidth } Used</h3 >
103+ {:else if variant === " eVault" }
104+ <h3 class =" text-black-300 text-3xl font-semibold mb-3 z-[1]" >
105+ {state .progressWidth } Used
106+ </h3 >
71107 {/if }
72108 </div >
73109 <div >
74- {#if variant === " eName" }
110+ {#if variant === " eName" }
75111 <p class =" text-gray font-normal" >Your eName</p >
76112 <div class =" flex items-center justify-between w-full" >
77- <p class ="text-white w-full font-medium" >@ {userId }</p >
113+ <p class ="text-white w-full font-medium" >{userId }</p >
78114 </div >
79115 {:else if variant === " ePassport" }
80116 <div class =" flex gap-2 flex-col" >
81117 {#if userData }
82- {#each Object .entries (userData ) as [fieldName, value] }
118+ {#each Object .entries (userData ) as [fieldName, value]}
83119 <div class =" flex justify-between" >
84- <p class ="text-gray" >{fieldName }</p >
120+ <p class ="text-gray capitalize " >{fieldName }</p >
85121 <p class =" font-medium text-white" >{value }</p >
86122 </div >
87123 {/each }
88124 {/if }
89125 </div >
90126 {:else if variant === " eVault" }
91- <div >
92- <div class =" flex justify-between mb-1 " >
93- <p class ="z-[1]" >{usedStorage }GB Used</p >
94- <p class ="z-[1]" >{totalStorage }GB total storage</p >
95- </div >
96- <div class =" relative w-full h-3 rounded-full overflow-hidden bg-primary-400" >
97- <div class ="h-full bg-secondary rounded-full" style ={` width: calc(${state .progressWidth }) ` }></div >
127+ <div >
128+ <div class =" flex justify-between mb-1" >
129+ <p class ="z-[1]" >{usedStorage }GB Used</p >
130+ <p class ="z-[1]" >{totalStorage }GB total storage</p >
131+ </div >
132+ <div
133+ class =" relative w-full h-3 rounded-full overflow-hidden bg-primary-400"
134+ >
135+ <div
136+ class =" h-full bg-secondary rounded-full"
137+ style ={` width: calc(${state .progressWidth }) ` }
138+ ></div >
139+ </div >
98140 </div >
99- </div >
100141 {/if }
101142 </div >
102143 </div >
103- </div >
144+ </div >
145+
0 commit comments