mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 22:53:24 +00:00
Merge pull request #17 from owiesnama/master
Fixing accessibility errors
This commit is contained in:
khatabWedaa
GitHub
@@ -8,7 +8,7 @@
|
||||
Meraki <span class="text-blue-400">UI</span>
|
||||
</a>
|
||||
|
||||
<a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui" target="_blank">
|
||||
<a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui" target="_blank" aria-label="Github link">
|
||||
<svg class="h-6 w-6 inline fill-current" viewBox="0 0 30 30">
|
||||
<path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
|
||||
</svg>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
</div>
|
||||
|
||||
<back-to-top visibleoffset="800">
|
||||
<button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none">
|
||||
<button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
|
||||
<svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="flex max-w-sm bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
|
||||
<div class="w-2 bg-gray-800"></div>
|
||||
<div class="flex items-center px-2 py-3">
|
||||
<img class="w-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
|
||||
<img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
|
||||
|
||||
<div class="mx-3">
|
||||
<p class="text-gray-600">Sara was replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">upload image</a>.</p>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
|
||||
<div class="flex justify-center md:justify-end -mt-16">
|
||||
<img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
|
||||
alt="Testimonial avatar"
|
||||
src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div class="flex justify-center mt-6">
|
||||
<div class="bg-white rounded-md">
|
||||
<div class="flex flex-wrap justify-between md:flex-row">
|
||||
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email">
|
||||
<input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
<a href="#" class="text-xl font-bold">Brand</a>
|
||||
<p class="py-2 sm:py-0">All rights reserved</p>
|
||||
<div class="flex -mx-2">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400">
|
||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
|
||||
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
|
||||
<path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
|
||||
</svg>
|
||||
|
||||
@@ -6,23 +6,23 @@
|
||||
<form>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
|
||||
<div>
|
||||
<label class="text-gray-700">Username</label>
|
||||
<input type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<label class="text-gray-700" for="username">Username</label>
|
||||
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Email Address</label>
|
||||
<input type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<label class="text-gray-700" for="emailAddress">Email Address</label>
|
||||
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Password</label>
|
||||
<input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<label class="text-gray-700" for="password">Password</label>
|
||||
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-gray-700">Password Confirmation</label>
|
||||
<input type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
|
||||
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
|
||||
<form>
|
||||
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
|
||||
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email">
|
||||
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
|
||||
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -8,14 +8,17 @@
|
||||
|
||||
<form>
|
||||
<div class="mt-4 w-full">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"
|
||||
type="email" placeholder="Email Address" aria-label="Email Address">
|
||||
</div>
|
||||
<div class="mt-4 w-full">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password">
|
||||
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"
|
||||
type="password" placeholder="Password" aria-label="Password">
|
||||
</div>
|
||||
<div class="flex justify-between items-center mt-6">
|
||||
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
|
||||
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none"
|
||||
type="button">
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -29,17 +29,17 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
|
||||
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
|
||||
<input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
type="email">
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex justify-between">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
|
||||
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
|
||||
</div>
|
||||
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
<input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
|
||||
type="password">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
<div class="md:hidden">
|
||||
<button type="button" @click="isOpen = !isOpen"
|
||||
class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none">
|
||||
class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path
|
||||
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
|
||||
<form action="#">
|
||||
<div class="mt-4">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center justify-between">
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
@@ -26,15 +26,15 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-4 md:mt-0">
|
||||
<button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none">
|
||||
<button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
|
||||
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button type="button" class="flex items-center focus:outline-none">
|
||||
<button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
|
||||
<div class="h-8 w-8 overflow-hidden rounded-full border-2 border-gray-400">
|
||||
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover">
|
||||
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
|
||||
</div>
|
||||
|
||||
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex md:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
|
||||
<button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
|
||||
</svg>
|
||||
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search">
|
||||
<input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,25 +11,25 @@
|
||||
</p>
|
||||
|
||||
<div class="flex items-center -mx-2 mt-6">
|
||||
<a class="mx-2" href="#">
|
||||
<a class="mx-2" href="#" aria-label="Twitter">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#">
|
||||
<a class="mx-2" href="#" aria-label="Facebook">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#">
|
||||
<a class="mx-2" href="#" aria-label="Linkden">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a class="mx-2" href="#">
|
||||
<a class="mx-2" href="#" aria-label="Github">
|
||||
<svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
|
||||
</svg>
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||
<div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
|
||||
<div class="mt-4 md:mt-0">
|
||||
<button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
|
||||
<button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
|
||||
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'">
|
||||
<button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="View code snippet">
|
||||
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13.3252 3.05011L8.66765 20.4323L10.5995 20.9499L15.257 3.56775L13.3252 3.05011Z"/>
|
||||
<path d="M7.61222 18.3608L8.97161 16.9124L8.9711 16.8933L3.87681 12.1121L8.66724 7.00798L7.20892 5.63928L1.0498 12.2017L7.61222 18.3608Z"/>
|
||||
@@ -19,7 +19,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none">
|
||||
<button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" aria-label="Copy">
|
||||
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
|
||||
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
|
||||
|
||||
Reference in New Issue
Block a user