mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 13:21:29 +04:00
92 lines
3.3 KiB
Plaintext
92 lines
3.3 KiB
Plaintext
---
|
|
import Icon from '@ui/Icon.astro'
|
|
import Button from '@ui/Button.astro'
|
|
import AvatarUpload from '@ui/AvatarUpload.astro'
|
|
import Datepicker from '@ui/Datepicker.astro'
|
|
import FormGroup from '@ui/FormGroup.astro'
|
|
---
|
|
|
|
<div class="modal-header">
|
|
<h4 class="modal-title" id="modal-edit-profile-title">Edit profile</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-4">
|
|
<div class="row align-items-end">
|
|
<div class="col-auto">
|
|
<AvatarUpload class="rounded" size="lg" />
|
|
</div>
|
|
<div class="col">
|
|
<label class="form-label">Avatar</label>
|
|
<div class="text-secondary">Click to upload a new avatar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<FormGroup label="First name" for="profile-first-name" class="mb-4">
|
|
<input class="form-control" id="profile-first-name" type="text" placeholder="John" />
|
|
</FormGroup>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<FormGroup label="Last name" for="profile-last-name" class="mb-4">
|
|
<input class="form-control" id="profile-last-name" type="text" placeholder="Doe" />
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<FormGroup label="Email" for="profile-email" class="mb-4">
|
|
<input class="form-control" id="profile-email" type="email" placeholder="john.doe@example.com" />
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Phone" for="profile-phone" class="mb-4">
|
|
<input class="form-control" id="profile-phone" type="tel" placeholder="+1 (555) 123-4567" />
|
|
</FormGroup>
|
|
|
|
<FormGroup label="Bio" for="profile-bio" class="mb-4">
|
|
<textarea class="form-control" id="profile-bio" rows="4" placeholder="Tell us about yourself..."></textarea>
|
|
</FormGroup>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<FormGroup label="Location" for="profile-location" class="mb-4">
|
|
<input class="form-control" id="profile-location" type="text" placeholder="City, Country" />
|
|
</FormGroup>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<FormGroup label="Date of birth" for="datepicker-profile-birthdate" class="mb-4">
|
|
<Datepicker layout="icon" id="profile-birthdate" />
|
|
</FormGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<FormGroup label="Social links" class="mb-4">
|
|
<div class="row g-2">
|
|
<div class="col-12">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><Icon name="brand-twitter" /></span>
|
|
<input type="text" class="form-control" placeholder="twitter.com/username" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><Icon name="brand-github" /></span>
|
|
<input type="text" class="form-control" placeholder="github.com/username" />
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="input-group">
|
|
<span class="input-group-text"><Icon name="brand-linkedin" /></span>
|
|
<input type="text" class="form-control" placeholder="linkedin.com/in/username" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</FormGroup>
|
|
|
|
<Button type="submit" text="Save changes" color="primary" block class="mt-4" />
|
|
</form>
|
|
</div>
|