242
									
								
								src/components/presets/Profile.svelte
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										242
									
								
								src/components/presets/Profile.svelte
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,242 @@ | ||||
| <div class="min-h-screen w-full p-4"> | ||||
|   <div class="section-title w-full mb-6 pt-3"> | ||||
|     <div class="flex flex-row items-center justify-between mb-4"> | ||||
|       <div class="flex flex-col"> | ||||
|         <div class="text-xs uppercase font-light text-grey-500">Pages</div> | ||||
|         <div class="text-xl font-bold">User profile</div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
|   <div | ||||
|     class="w-full p-4 mb-4 rounded-lg bg-white border border-grey-100"> | ||||
|     <div class="flex flex-row items-center justify-start p-4"> | ||||
|       <div class="flex-shrink-0 w-24"> | ||||
|         <img | ||||
|           src="/images/faces/m1.png" | ||||
|           alt="media" | ||||
|           class="shadow rounded-full h-20 w-20 shadow-outline mb-2" /> | ||||
|       </div> | ||||
|       <div class="py-2 px-2"> | ||||
|         <p class="text-base font-bold whitespace-no-wrap">Lucas Smith</p> | ||||
|         <p class="text-sm text-grey-500 whitespace-no-wrap"> | ||||
|           Vital Database Dude | ||||
|         </p> | ||||
|         <div | ||||
|           class="flex flex-row items-center justify-start w-full py-1 space-x-2"> | ||||
|           <svg | ||||
|             stroke="currentColor" | ||||
|             fill="none" | ||||
|             stroke-width="2" | ||||
|             viewBox="0 0 24 24" | ||||
|             stroke-linecap="round" | ||||
|             stroke-linejoin="round" | ||||
|             class="stroke-current text-xl text-twitter" | ||||
|             height="1em" | ||||
|             width="1em" | ||||
|             xmlns="http://www.w3.org/2000/svg"><path | ||||
|               d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /></svg><svg | ||||
|             stroke="currentColor" | ||||
|             fill="none" | ||||
|             stroke-width="2" | ||||
|             viewBox="0 0 24 24" | ||||
|             stroke-linecap="round" | ||||
|             stroke-linejoin="round" | ||||
|             class="stroke-current text-xl text-facebook" | ||||
|             height="1em" | ||||
|             width="1em" | ||||
|             xmlns="http://www.w3.org/2000/svg"><path | ||||
|               d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg><svg | ||||
|             stroke="currentColor" | ||||
|             fill="none" | ||||
|             stroke-width="2" | ||||
|             viewBox="0 0 24 24" | ||||
|             stroke-linecap="round" | ||||
|             stroke-linejoin="round" | ||||
|             class="stroke-current text-xl text-instagram" | ||||
|             height="1em" | ||||
|             width="1em" | ||||
|             xmlns="http://www.w3.org/2000/svg"><rect | ||||
|               x="2" | ||||
|               y="2" | ||||
|               width="20" | ||||
|               height="20" | ||||
|               rx="5" | ||||
|               ry="5" /> | ||||
|             <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /> | ||||
|             <line x1="17.5" y1="6.5" x2="17.5" y2="6.5" /></svg> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex"> | ||||
|         <button | ||||
|           class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Subscribe</button><button | ||||
|           class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white">Follow</button> | ||||
|       </div> | ||||
|     </div> | ||||
|     <div class="flex flex-wrap"> | ||||
|       <div class="w-full p-4"> | ||||
|         <div class="flex flex-wrap flex-col w-full tabs"> | ||||
|           <div class="flex lg:flex-wrap flex-row lg:space-x-2"> | ||||
|             <div class="flex-none"> | ||||
|               <button class="tab tab-underline tab-active" type="button">Account | ||||
|                 settings</button> | ||||
|             </div> | ||||
|             <div class="flex-none"> | ||||
|               <button class="tab tab-underline" type="button">Email preferences</button> | ||||
|             </div> | ||||
|             <div class="flex-none"> | ||||
|               <button class="tab tab-underline" type="button">Security settings</button> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div class="tab-content block"> | ||||
|             <div class="py-4 w-full lg:w-1/2"> | ||||
|               <div class="flex flex-col"> | ||||
|                 <form class="form flex flex-wrap w-full"> | ||||
|                   <div class="w-full"> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">First name</div><input | ||||
|                         name="first-name" | ||||
|                         type="text" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you first name" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Last name</div><input | ||||
|                         name="last-name" | ||||
|                         type="text" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you last name" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Email address</div><input | ||||
|                         name="email" | ||||
|                         type="email" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you email address" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Company</div><input | ||||
|                         name="company" | ||||
|                         type="text" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you company" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Position</div><input | ||||
|                         name="position" | ||||
|                         type="text" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you position" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Language</div><select | ||||
|                         name="language" | ||||
|                         class="form-select "><option>Select language</option> | ||||
|                         <option value="english">English</option> | ||||
|                         <option value="spanish">Spanish</option> | ||||
|                         <option value="portuguese">Portuguese</option></select> | ||||
|                     </div> | ||||
|                   </div><input | ||||
|                     type="submit" | ||||
|                     class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" /> | ||||
|                 </form> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div class="tab-content hidden"> | ||||
|             <div class="py-4 w-full lg:w-1/2"> | ||||
|               <div class="flex flex-col"> | ||||
|                 <form class="form flex flex-wrap w-full"> | ||||
|                   <div class="w-full"> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Current email</div><input | ||||
|                         name="email" | ||||
|                         type="email" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you current email address" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">New email</div><input | ||||
|                         name="email" | ||||
|                         type="email" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter you new email address" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Daily updates</div> | ||||
|                       <div class="flex items-center justify-start space-x-2"> | ||||
|                         <label | ||||
|                           class="flex items-center justify-start space-x-2"><input | ||||
|                             type="radio" | ||||
|                             name="daily-updates" | ||||
|                             class="form-radio h-4 w-4 " | ||||
|                             value="yes" /><span | ||||
|                             class="">Yes</span></label><label | ||||
|                           class="flex items-center justify-start space-x-2"><input | ||||
|                             type="radio" | ||||
|                             name="daily-updates" | ||||
|                             class="form-radio h-4 w-4 " | ||||
|                             value="no" /><span class="">No</span></label> | ||||
|                       </div> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Weekly updates</div> | ||||
|                       <div class="flex items-center justify-start space-x-2"> | ||||
|                         <label | ||||
|                           class="flex items-center justify-start space-x-2"><input | ||||
|                             type="radio" | ||||
|                             name="weekle-updates" | ||||
|                             class="form-radio h-4 w-4 " | ||||
|                             value="yes" /><span | ||||
|                             class="">Yes</span></label><label | ||||
|                           class="flex items-center justify-start space-x-2"><input | ||||
|                             type="radio" | ||||
|                             name="weekle-updates" | ||||
|                             class="form-radio h-4 w-4 " | ||||
|                             value="no" /><span class="">No</span></label> | ||||
|                       </div> | ||||
|                     </div> | ||||
|                   </div><input | ||||
|                     type="submit" | ||||
|                     class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" /> | ||||
|                 </form> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|           <div class="tab-content hidden"> | ||||
|             <div class="py-4 w-full lg:w-1/2"> | ||||
|               <div class="flex flex-col"> | ||||
|                 <form class="form flex flex-wrap w-full"> | ||||
|                   <div class="w-full"> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Current password</div><input | ||||
|                         name="current-password" | ||||
|                         type="password" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter your current password" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">New password</div><input | ||||
|                         name="new-password" | ||||
|                         type="password" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter your new password" /> | ||||
|                     </div> | ||||
|                     <div class="form-element"> | ||||
|                       <div class="form-label">Confirm new password</div><input | ||||
|                         name="confirm-new-password" | ||||
|                         type="password" | ||||
|                         class="form-input " | ||||
|                         placeholder="Enter your new password confirmation" /> | ||||
|                     </div> | ||||
|                   </div><input | ||||
|                     type="submit" | ||||
|                     class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded" /> | ||||
|                 </form> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </div> | ||||
		Reference in New Issue
	
	Block a user