1041 lines
41 KiB
Plaintext
1041 lines
41 KiB
Plaintext
---
|
||
/* eslint max-lines: 'off' */
|
||
|
||
import { asset } from '../lib/data.js'
|
||
import PictureUploader from '../widgets/PictureUploader.astro'
|
||
import ToggleSwitch from '../widgets/ToggleSwitch.astro'
|
||
---
|
||
|
||
<div
|
||
class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900"
|
||
>
|
||
<div class="mb-4 col-span-full xl:mb-2">
|
||
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||
<ol
|
||
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||
>
|
||
<li class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white"
|
||
>
|
||
<svg
|
||
class="w-5 h-5 mr-2.5"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||
></path></svg
|
||
>
|
||
Home
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center">
|
||
<svg
|
||
class="w-6 h-6 text-gray-400"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
fill-rule="evenodd"
|
||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||
clip-rule="evenodd"></path></svg
|
||
>
|
||
<a
|
||
href="#"
|
||
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white"
|
||
>Users</a
|
||
>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="flex items-center">
|
||
<svg
|
||
class="w-6 h-6 text-gray-400"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
fill-rule="evenodd"
|
||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||
clip-rule="evenodd"></path></svg
|
||
>
|
||
<span
|
||
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||
aria-current="page">Settings</span
|
||
>
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</nav>
|
||
<h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
|
||
User settings
|
||
</h1>
|
||
</div>
|
||
<!-- Right Content -->
|
||
<div class="col-span-full xl:col-auto">
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<div
|
||
class="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
|
||
>
|
||
<PictureUploader title="Profile picture" />
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<h3 class="mb-4 text-xl font-semibold dark:text-white">
|
||
Language & Time
|
||
</h3>
|
||
<div class="mb-4">
|
||
<label
|
||
for="settings-language"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Select language</label
|
||
>
|
||
<select
|
||
id="settings-language"
|
||
name="countries"
|
||
class="bg-gray-50 border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
>
|
||
<option>English (US)</option>
|
||
<option>Italiano</option>
|
||
<option>Français (France)</option>
|
||
<option>正體字</option>
|
||
<option>Español (España)</option>
|
||
<option>Deutsch</option>
|
||
<option>Português (Brasil)</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-6">
|
||
<label
|
||
for="settings-timezone"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Time Zone</label
|
||
>
|
||
<select
|
||
id="settings-timezone"
|
||
name="countries"
|
||
class="bg-gray-50 border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
>
|
||
<option>GMT+0 Greenwich Mean Time (GMT)</option>
|
||
<option>GMT+1 Central European Time (CET)</option>
|
||
<option>GMT+2 Eastern European Time (EET)</option>
|
||
<option>GMT+3 Moscow Time (MSK)</option>
|
||
<option>GMT+5 Pakistan Standard Time (PKT)</option>
|
||
<option>GMT+8 China Standard Time (CST)</option>
|
||
<option>GMT+10 Eastern Australia Standard Time (AEST)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<div class="flow-root">
|
||
<h3 class="text-xl font-semibold dark:text-white">Social accounts</h3>
|
||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||
<li class="py-4">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-5 h-5 dark:text-white"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
data-prefix="fab"
|
||
data-icon="facebook-f"
|
||
role="img"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 320 512"
|
||
><path
|
||
fill="currentColor"
|
||
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<span
|
||
class="block text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
Facebook account
|
||
</span>
|
||
<a
|
||
href="#"
|
||
class="block text-sm font-normal truncate text-primary-700 hover:underline dark:text-primary-500"
|
||
>
|
||
www.facebook.com/themesberg
|
||
</a>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="py-4">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-5 h-5 dark:text-white"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
data-prefix="fab"
|
||
data-icon="twitter"
|
||
role="img"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 512 512"
|
||
><path
|
||
fill="currentColor"
|
||
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<span
|
||
class="block text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
Twitter account
|
||
</span>
|
||
<a
|
||
href="#"
|
||
class="block text-sm font-normal truncate text-primary-700 hover:underline dark:text-primary-500"
|
||
>
|
||
www.twitter.com/themesberg
|
||
</a>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="py-4">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-5 h-5 dark:text-white"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
data-prefix="fab"
|
||
data-icon="github"
|
||
role="img"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 496 512"
|
||
><path
|
||
fill="currentColor"
|
||
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<span
|
||
class="block text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
Github account
|
||
</span>
|
||
<span
|
||
class="block text-sm font-normal text-gray-500 truncate dark:text-gray-400"
|
||
>
|
||
Not connected
|
||
</span>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Connect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="pt-4 pb-6">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-5 h-5 dark:text-white"
|
||
aria-hidden="true"
|
||
focusable="false"
|
||
data-prefix="fab"
|
||
data-icon="dribbble"
|
||
role="img"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 512 512"
|
||
><path
|
||
fill="currentColor"
|
||
d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<span
|
||
class="block text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
Dribbble account
|
||
</span>
|
||
<span
|
||
class="block text-sm font-normal text-gray-500 truncate dark:text-gray-400"
|
||
>
|
||
Not connected
|
||
</span>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Connect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div>
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<div class="flow-root">
|
||
<h3 class="text-xl font-semibold dark:text-white">Other accounts</h3>
|
||
<ul class="mb-6 divide-y divide-gray-200 dark:divide-gray-700">
|
||
<li class="py-4">
|
||
<div
|
||
class="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
|
||
>
|
||
<div class="flex space-x-4 xl:mb-4 2xl:mb-0">
|
||
<div>
|
||
<img
|
||
class="w-6 h-6 rounded-full"
|
||
src={asset('images/users/bonnie-green.png')}
|
||
alt="Bonnie image"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white"
|
||
>
|
||
Bonnie Green
|
||
</p>
|
||
<p
|
||
class="mb-1 text-sm font-normal truncate text-primary-700 dark:text-primary-500"
|
||
>
|
||
New York, USA
|
||
</p>
|
||
<p
|
||
class="text-xs font-medium text-gray-500 dark:text-gray-400"
|
||
>
|
||
Last seen: 1 min ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="inline-flex items-center w-auto xl:w-full 2xl:w-auto">
|
||
<a
|
||
href="#"
|
||
class="w-full px-3 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="py-4">
|
||
<div
|
||
class="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
|
||
>
|
||
<div class="flex space-x-4 xl:mb-4 2xl:mb-0">
|
||
<div>
|
||
<img
|
||
class="w-6 h-6 rounded-full"
|
||
src={asset('images/users/jese-leos.png')}
|
||
alt="Jese image"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white"
|
||
>
|
||
Jese Leos
|
||
</p>
|
||
<p
|
||
class="mb-1 text-sm font-normal truncate text-primary-700 dark:text-primary-500"
|
||
>
|
||
California, USA
|
||
</p>
|
||
<p
|
||
class="text-xs font-medium text-gray-500 dark:text-gray-400"
|
||
>
|
||
Last seen: 2 min ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="inline-flex items-center w-auto xl:w-full 2xl:w-auto">
|
||
<a
|
||
href="#"
|
||
class="w-full px-3 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="py-4">
|
||
<div
|
||
class="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
|
||
>
|
||
<div class="flex space-x-4 xl:mb-4 2xl:mb-0">
|
||
<div>
|
||
<img
|
||
class="w-6 h-6 rounded-full"
|
||
src={asset('images/users/thomas-lean.png')}
|
||
alt="Thomas image"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white"
|
||
>
|
||
Thomas Lean
|
||
</p>
|
||
<p
|
||
class="mb-1 text-sm font-normal truncate text-primary-700 dark:text-primary-500"
|
||
>
|
||
Texas, USA
|
||
</p>
|
||
<p
|
||
class="text-xs font-medium text-gray-500 dark:text-gray-400"
|
||
>
|
||
Last seen: 1 hour ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="inline-flex items-center w-auto xl:w-full 2xl:w-auto">
|
||
<a
|
||
href="#"
|
||
class="w-full px-3 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="pt-4">
|
||
<div
|
||
class="flex justify-between xl:block 2xl:flex align-center 2xl:space-x-4"
|
||
>
|
||
<div class="flex space-x-4 xl:mb-4 2xl:mb-0">
|
||
<div>
|
||
<img
|
||
class="w-6 h-6 rounded-full"
|
||
src={asset('images/users/lana-byrd.png')}
|
||
alt="Lana image"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 leading-none truncate mb-0.5 dark:text-white"
|
||
>
|
||
Lana Byrd
|
||
</p>
|
||
<p
|
||
class="mb-1 text-sm font-normal truncate text-primary-700 dark:text-primary-500"
|
||
>
|
||
Texas, USA
|
||
</p>
|
||
<p
|
||
class="text-xs font-medium text-gray-500 dark:text-gray-400"
|
||
>
|
||
Last seen: 1 hour ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="inline-flex items-center w-auto xl:w-full 2xl:w-auto">
|
||
<a
|
||
href="#"
|
||
class="w-full px-3 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Disconnect</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div>
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<h3 class="mb-4 text-xl font-semibold dark:text-white">
|
||
General information
|
||
</h3>
|
||
<form action="#">
|
||
<div class="grid grid-cols-6 gap-6">
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="first-name"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>First Name</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="first-name"
|
||
id="first-name"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="Bonnie"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="last-name"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Last Name</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="last-name"
|
||
id="last-name"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="Green"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="country"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Country</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="country"
|
||
id="country"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="United States"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="city"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>City</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="city"
|
||
id="city"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="e.g. San Francisco"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="address"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Address</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="address"
|
||
id="address"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="e.g. California"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="email"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Email</label
|
||
>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
id="email"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="example@company.com"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="phone-number"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Phone Number</label
|
||
>
|
||
<input
|
||
type="number"
|
||
name="phone-number"
|
||
id="phone-number"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="e.g. +(12)3456 789"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="birthday"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Birthday</label
|
||
>
|
||
<input
|
||
type="number"
|
||
name="birthday"
|
||
id="birthday"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="15/08/1990"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="organization"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Organization</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="organization"
|
||
id="organization"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="Company Name"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="role"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Role</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="role"
|
||
id="role"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="React Developer"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="department"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Department</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="department"
|
||
id="department"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="Development"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="zip-code"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Zip/postal code</label
|
||
>
|
||
<input
|
||
type="number"
|
||
name="zip-code"
|
||
id="zip-code"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="123456"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-full">
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
type="submit">Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<h3 class="mb-4 text-xl font-semibold dark:text-white">
|
||
Password information
|
||
</h3>
|
||
<form action="#">
|
||
<div class="grid grid-cols-6 gap-6">
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="current-password"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Current password</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="current-password"
|
||
id="current-password"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="••••••••"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="password"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>New password</label
|
||
>
|
||
<input
|
||
data-popover-target="popover-password"
|
||
data-popover-placement="bottom"
|
||
type="password"
|
||
id="password"
|
||
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
||
placeholder="••••••••"
|
||
required
|
||
/>
|
||
<div
|
||
data-popover
|
||
id="popover-password"
|
||
role="tooltip"
|
||
class="absolute z-10 invisible inline-block text-sm font-light text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400"
|
||
>
|
||
<div class="p-3 space-y-2">
|
||
<h3 class="font-semibold text-gray-900 dark:text-white">
|
||
Must have at least 6 characters
|
||
</h3>
|
||
<div class="grid grid-cols-4 gap-2">
|
||
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
|
||
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
|
||
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
|
||
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
|
||
</div>
|
||
<p>It’s better to have:</p>
|
||
<ul>
|
||
<li class="flex items-center mb-1">
|
||
<svg
|
||
class="w-4 h-4 mr-2 text-green-400 dark:text-green-500"
|
||
aria-hidden="true"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
fill-rule="evenodd"
|
||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||
clip-rule="evenodd"></path></svg
|
||
>
|
||
Upper & lower case letters
|
||
</li>
|
||
<li class="flex items-center mb-1">
|
||
<svg
|
||
class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400"
|
||
aria-hidden="true"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
fill-rule="evenodd"
|
||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path></svg
|
||
>
|
||
A symbol (#$&)
|
||
</li>
|
||
<li class="flex items-center">
|
||
<svg
|
||
class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400"
|
||
aria-hidden="true"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
fill-rule="evenodd"
|
||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path></svg
|
||
>
|
||
A longer password (min. 12 chars.)
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div data-popper-arrow></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-6 sm:col-span-3">
|
||
<label
|
||
for="confirm-password"
|
||
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||
>Confirm password</label
|
||
>
|
||
<input
|
||
type="text"
|
||
name="confirm-password"
|
||
id="confirm-password"
|
||
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||
placeholder="••••••••"
|
||
required
|
||
/>
|
||
</div>
|
||
<div class="col-span-6 sm:col-full">
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
type="submit">Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||
>
|
||
<div class="flow-root">
|
||
<h3 class="text-xl font-semibold dark:text-white">Sessions</h3>
|
||
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
|
||
<li class="py-4">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-6 h-6 dark:text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
California 123.123.123.123
|
||
</p>
|
||
<p
|
||
class="text-sm font-normal text-gray-500 truncate dark:text-gray-400"
|
||
>
|
||
Chrome on macOS
|
||
</p>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Revoke</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="pt-4 pb-6">
|
||
<div class="flex items-center space-x-4">
|
||
<div class="flex-shrink-0">
|
||
<svg
|
||
class="w-6 h-6 dark:text-white"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
><path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
|
||
></path></svg
|
||
>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<p
|
||
class="text-base font-semibold text-gray-900 truncate dark:text-white"
|
||
>
|
||
Rome 24.456.355.98
|
||
</p>
|
||
<p
|
||
class="text-sm font-normal text-gray-500 truncate dark:text-gray-400"
|
||
>
|
||
Safari on iPhone
|
||
</p>
|
||
</div>
|
||
<div class="inline-flex items-center">
|
||
<a
|
||
href="#"
|
||
class="px-3 py-2 mb-3 mr-3 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||
>Revoke</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div>
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>See more</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 px-4 xl:grid-cols-2 xl:gap-4">
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 xl:mb-0"
|
||
>
|
||
<div class="flow-root">
|
||
<h3 class="text-xl font-semibold dark:text-white">
|
||
Alerts & Notifications
|
||
</h3>
|
||
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||
You can set up Themesberg to get notifications
|
||
</p>
|
||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||
<!-- Item 1 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Company News
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Get Themesberg news, announcements, and product updates
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="company-news" />
|
||
</div>
|
||
<!-- Item 2 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Account Activity
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Get important notifications about you or activity you've missed
|
||
</div>
|
||
</div>
|
||
|
||
<ToggleSwitch id="account-activity" checked />
|
||
</div>
|
||
<!-- Item 3 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Meetups Near You
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Get an email when a Dribbble Meetup is posted close to my location
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="meetups" />
|
||
</div>
|
||
<!-- Item 4 -->
|
||
<div class="flex items-center justify-between pt-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
New Messages
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Get Themesberg news, announcements, and product updates
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="new-messages" />
|
||
</div>
|
||
</div>
|
||
<div class="mt-6">
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 xl:mb-0"
|
||
>
|
||
<div class="flow-root">
|
||
<h3 class="text-xl font-semibold dark:text-white">Email Notifications</h3>
|
||
<p class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||
You can set up Themesberg to get email notifications
|
||
</p>
|
||
<div class="divide-y divide-gray-200 dark:divide-gray-700">
|
||
<!-- Item 1 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Rating reminders
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Send an email reminding me to rate an item a week after purchase
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="rating-reminders" />
|
||
</div>
|
||
<!-- Item 2 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Item update notifications
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Send user and product notifications for you
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="item-update" />
|
||
</div>
|
||
<!-- Item 3 -->
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Item comment notifications
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Send me an email when someone comments on one of my items
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="item-comment" />
|
||
</div>
|
||
<!-- Item 4 -->
|
||
<div class="flex items-center justify-between pt-4">
|
||
<div class="flex flex-col flex-grow">
|
||
<div class="text-lg font-semibold text-gray-900 dark:text-white">
|
||
Buyer review notifications
|
||
</div>
|
||
<div class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||
Send me an email when someone leaves a review with their rating
|
||
</div>
|
||
</div>
|
||
<ToggleSwitch id="buyer-rev" />
|
||
</div>
|
||
</div>
|
||
<div class="mt-6">
|
||
<button
|
||
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||
>Save all</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|