beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Dark Mode (#33)

Browse source 
* Add dark mode to webiste

* wip

* wip

* wip

* wip

* wip

* Add dark mode to all components and fix some style
This commit is contained in:
khatab Wedaa 2020-12-26 12:35:46 +02:00 committed by GitHub
parent 705673eb96
commit ce79c7f31a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 642 additions and 629 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.vue
View file

@ -1,15 +1,26 @@
<template> <template>
<div class="bg-white font-roboto" id="app"> <div :class="darkMode ? 'dark' : ''">
<div class="bg-white dark:bg-gray-900 font-roboto" id="app">
<header-component></header-component> <header-component></header-component>
<main-component></main-component> <main-component></main-component>
<back-to-top visibleoffset="800"> <back-to-top visibleoffset="800">
<app-button class="bg-gray-800 hover:bg-gray-900 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top"> <app-button class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 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"> <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"/> <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> </svg>
</app-button> </app-button>
</back-to-top> </back-to-top>
<app-button @click="darkMode = !darkMode" class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 text-white fixed bottom-0 right-0 my-24 mx-10 p-2 rounded-md focus:outline-none" aria-label="Color Mode">
<svg v-if="darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>
<svg v-if="!darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
</app-button>
</div>
</div> </div>
</template> </template>
@ -25,6 +36,7 @@ export default {
data() { data() {
return { return {
og: "https://merakiui.com" + require("./assets/merakiui-og.png"), og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
darkMode: false,
}; };
}, },

2
src/components/Header.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<header class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 border-b-4 border-blue-500"> <header class="bg-gray-800 dark:bg-gray-900 border-b-4 border-blue-500">
<nav> <nav>
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">

8
src/components/Main.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<div class="container mx-auto px-6 pb-12"> <div class="container mx-auto px-6 pb-12">
<div class="py-16 text-center"> <div class="py-16 text-center">
<h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1> <h1 class="text-xl md:text-3xl text-gray-800 dark:text-white font-medium">Discover new components. Build amazing things 🔥</h1>
<div class="max-w-2xl mx-auto"> <div class="max-w-2xl mx-auto">
<div class="flex items-center justify-center mt-5 "> <div class="flex items-center justify-center mt-5 ">
<div class="mt-2 md:mt-0"> <div class="mt-2 md:mt-0">
<span v-for="category in categories" :key="category.name"> <span v-for="category in categories" :key="category.name">
<app-button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</app-button> <app-button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200' : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'">{{ category.name }}</app-button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p> <p class="mt-8 text-gray-700 dark:text-gray-300 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline"> configuration</a></p>
</div> </div>
<div class="w-full max-w-6xl mx-auto"> <div class="w-full max-w-6xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name"> <div class="mb-16" v-for="category in list" :key="category.name">
<h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1> <h1 class="text-2xl text-gray-800 dark:text-white font-semibold mb-6 capitalize" v-text="category.name"></h1>
<div v-for="component in category.components" :key="component.name" :name="component.name"> <div v-for="component in category.components" :key="component.name" :name="component.name">
<component :is="category.name + component.name"></component> <component :is="category.name + component.name"></component>

12
src/components/ui/Alerts/ErrorPop.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-red-500"> <div class="flex justify-center items-center w-12 bg-red-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/> <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
@ -10,8 +10,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-red-500 font-semibold">Error</span> <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
<p class="text-gray-600 text-sm">Your email is already used!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +25,7 @@
return { return {
name: 'Error Pop', name: 'Error Pop',
code: ` code: `
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-red-500"> <div class="flex justify-center items-center w-12 bg-red-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/> <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
@ -34,8 +34,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-red-500 font-semibold">Error</span> <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
<p class="text-gray-600 text-sm">Your email is already used!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
</div> </div>
</div> </div>
</div>` </div>`

12
src/components/ui/Alerts/InfoPop.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-blue-500"> <div class="flex justify-center items-center w-12 bg-blue-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@ -10,8 +10,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-blue-500 font-semibold">Info</span> <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
<p class="text-gray-600 text-sm">This channel archived by the owner!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +25,7 @@
return { return {
name: 'Info Pop', name: 'Info Pop',
code: ` code: `
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-blue-500"> <div class="flex justify-center items-center w-12 bg-blue-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@ -34,8 +34,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-blue-500 font-semibold">Info</span> <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
<p class="text-gray-600 text-sm">This channel archived by the owner!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
</div> </div>
</div> </div>
</div>` </div>`

12
src/components/ui/Alerts/NotificationPop.vue
View file

@ -1,14 +1,14 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto"> <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
<div class="w-2 bg-gray-800"></div> <div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
<div class="flex items-center px-2 py-3"> <div class="flex items-center px-2 py-3">
<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"> <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"> <div class="mx-3">
<p class="text-gray-600">Sara has replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">uploaded image</a>.</p> <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
</div> </div>
</div> </div>
</div> </div>
@ -22,14 +22,14 @@
return { return {
name: 'Notification Pop', name: 'Notification Pop',
code: ` code: `
<div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto"> <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
<div class="w-2 bg-gray-800"></div> <div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
<div class="flex items-center px-2 py-3"> <div class="flex items-center px-2 py-3">
<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"> <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"> <div class="mx-3">
<p class="text-gray-600">Sara has replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">uploaded image</a>.</p> <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
</div> </div>
</div> </div>
</div>`, </div>`,

12
src/components/ui/Alerts/SuccessPop.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-green-500"> <div class="flex justify-center items-center w-12 bg-green-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
@ -10,8 +10,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-green-500 font-semibold">Success</span> <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
<p class="text-gray-600 text-sm">Your account was registered!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +25,7 @@
return { return {
name: 'Success Pop', name: 'Success Pop',
code: ` code: `
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-green-500"> <div class="flex justify-center items-center w-12 bg-green-500">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
@ -34,8 +34,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-green-500 font-semibold">Success</span> <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
<p class="text-gray-600 text-sm">Your account was registered!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
</div> </div>
</div> </div>
</div> </div>

12
src/components/ui/Alerts/WarningPop.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-yellow-400"> <div class="flex justify-center items-center w-12 bg-yellow-400">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@ -10,8 +10,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-yellow-400 font-semibold">Warning</span> <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
<p class="text-gray-600 text-sm">Your image size is too large!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
</div> </div>
</div> </div>
</div> </div>
@ -25,7 +25,7 @@
return { return {
name: 'Warning Pop', name: 'Warning Pop',
code: ` code: `
<div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden"> <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
<div class="flex justify-center items-center w-12 bg-yellow-400"> <div class="flex justify-center items-center w-12 bg-yellow-400">
<svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/> <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@ -34,8 +34,8 @@
<div class="-mx-3 py-2 px-4"> <div class="-mx-3 py-2 px-4">
<div class="mx-3"> <div class="mx-3">
<span class="text-yellow-400 font-semibold">Warning</span> <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
<p class="text-gray-600 text-sm">Your image size is too large!</p> <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
</div> </div>
</div> </div>
</div>` </div>`

70
src/components/ui/Authentication/LoginWithSideImage.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl"> <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div> <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
<div class="w-full py-8 px-6 md:px-8 lg:w-1/2"> <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
<h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2> <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
<p class="text-xl text-gray-600 text-center">Welcome back!</p> <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
<a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100"> <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
<div class="px-4 py-3"> <div class="px-4 py-3">
<svg class="h-6 w-6" viewBox="0 0 40 40"> <svg class="h-6 w-6" viewBox="0 0 40 40">
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/> <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
@ -19,43 +19,43 @@
</svg> </svg>
</div> </div>
<span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span> <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
</a> </a>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 lg:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
<a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a> <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
<span class="border-b w-1/5 lg:w-1/4"></span> <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label> <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email"> <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
</div> </div>
<div class="mt-4"> <div class="mt-4">
<div class="flex justify-between"> <div class="flex justify-between">
<label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label> <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a> <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
</div> </div>
<input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password"> <input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600"> <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Login Login
</button> </button>
</div> </div>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 md:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
<a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a> <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
<span class="border-b w-1/5 md:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
</div> </div>
</div> </div>
</div> </div>
@ -69,15 +69,15 @@
return { return {
name: 'Login With Side Image', name: 'Login With Side Image',
code: ` code: `
<div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl"> <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
<div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div> <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
<div class="w-full py-8 px-6 md:px-8 lg:w-1/2"> <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
<h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2> <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
<p class="text-xl text-gray-600 text-center">Welcome back!</p> <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
<a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100"> <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
<div class="px-4 py-3"> <div class="px-4 py-3">
<svg class="h-6 w-6" viewBox="0 0 40 40"> <svg class="h-6 w-6" viewBox="0 0 40 40">
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/> <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
@ -87,43 +87,43 @@
</svg> </svg>
</div> </div>
<span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span> <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
</a> </a>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 lg:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
<a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a> <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
<span class="border-b w-1/5 lg:w-1/4"></span> <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label> <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email"> <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
</div> </div>
<div class="mt-4"> <div class="mt-4">
<div class="flex justify-between"> <div class="flex justify-between">
<label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label> <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a> <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
</div> </div>
<input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password"> <input id="loggingPassword" class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600"> <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Login Login
</button> </button>
</div> </div>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 md:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
<a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a> <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
<span class="border-b w-1/5 md:w-1/4"></span> <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
</div> </div>
</div> </div>
</div>` </div>`

40
src/components/ui/Authentication/SimpleLogin.vue
View file

@ -1,25 +1,25 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto"> <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
<div class="py-4 px-6"> <div class="py-4 px-6">
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2> <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
<h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3> <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
<p class="mt-1 text-center text-gray-500">Login or create account</p> <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
<form> <form>
<div class="mt-4 w-full"> <div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address"> <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
</div> </div>
<div class="mt-4 w-full"> <div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password"> <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div> </div>
<div class="flex justify-between items-center mt-4"> <div class="flex justify-between items-center mt-4">
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a> <a href="#" class="text-gray-600 dark:text-gray-200 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 Login
@ -28,10 +28,10 @@
</form> </form>
</div> </div>
<div class="flex items-center justify-center py-4 bg-gray-100 text-center"> <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
<span class="text-gray-600 text-sm">Don't have an account? </span> <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a> <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div> </div>
</div> </div>
</div> </div>
@ -44,25 +44,25 @@
return { return {
name: 'Simple Login', name: 'Simple Login',
code: ` code: `
<div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto"> <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
<div class="py-4 px-6"> <div class="py-4 px-6">
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2> <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
<h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3> <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
<p class="mt-1 text-center text-gray-500">Login or create account</p> <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
<form> <form>
<div class="mt-4 w-full"> <div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address"> <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
</div> </div>
<div class="mt-4 w-full"> <div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password"> <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div> </div>
<div class="flex justify-between items-center mt-4"> <div class="flex justify-between items-center mt-4">
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a> <a href="#" class="text-gray-600 dark:text-gray-200 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 Login
@ -71,10 +71,10 @@
</form> </form>
</div> </div>
<div class="flex items-center justify-center py-4 bg-gray-100 text-center"> <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
<span class="text-gray-600 text-sm">Don't have an account? </span> <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a> <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div> </div>
</div>` </div>`
} }

4
src/components/ui/Buttons/Primary.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-8 flex items-center justify-center" slot="component"> <div class="px-3 py-8 flex items-center justify-center" slot="component">
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
Primary Primary
</button> </button>
</div> </div>
@ -14,7 +14,7 @@
return { return {
name: 'Primary', name: 'Primary',
code: ` code: `
<button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
Primary Primary
</button>` </button>`
} }

4
src/components/ui/Buttons/WithIcon.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6 flex items-center justify-center" slot="component"> <div class="px-3 py-6 flex items-center justify-center" slot="component">
<button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg> </svg>
@ -17,7 +17,7 @@
return { return {
name: 'With Icon', name: 'With Icon',
code: ` code: `
<button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg> </svg>

28
src/components/ui/Buttons/WithMenu.vue
View file

@ -2,21 +2,21 @@
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 pt-6 pb-40 flex justify-center" slot="component"> <div class="px-3 pt-6 pb-40 flex justify-center" slot="component">
<div class="flex items-center"> <div class="flex items-center">
<button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button> <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
<span class="border"></span> <span class="border border-transparent"></span>
<div class="relative"> <div class="relative">
<button @click="menuOpen = !menuOpen" class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button @click="menuOpen = !menuOpen" class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg> </svg>
</button> </button>
<div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20"> <div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
</div> </div>
</div> </div>
</div> </div>
@ -31,23 +31,23 @@
name: 'With Menu', name: 'With Menu',
code: ` code: `
<div class="flex items-center"> <div class="flex items-center">
<button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button> <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
<span class="border"></span> <span class="border border-transparent"></span>
<div class="relative"> <div class="relative">
<!-- Menu toggle button --> <!-- Menu toggle button -->
<button class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700"> <button class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg> </svg>
</button> </button>
<!-- Menu list --> <!-- Menu list -->
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20"> <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
<a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a> <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
</div> </div>
</div> </div>
</div>`, </div>`,

24
src/components/ui/Cards/Article.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md"> <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="font-light text-gray-600 text-sm">Mar 10, 2019</span> <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
<a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a> <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a> <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p> <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
</div> </div>
<div class="flex justify-between items-center mt-4"> <div class="flex justify-between items-center mt-4">
<a href="#" class="text-blue-600 hover:underline">Read more</a> <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
<div class="flex items-center"> <div class="flex items-center">
<img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar"> <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a> <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
</div> </div>
</div> </div>
</div> </div>
@ -31,23 +31,23 @@
return { return {
name: 'Article', name: 'Article',
code: ` code: `
<div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md"> <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="font-light text-gray-600 text-sm">Mar 10, 2019</span> <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
<a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a> <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a> <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p> <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
</div> </div>
<div class="flex justify-between items-center mt-4"> <div class="flex justify-between items-center mt-4">
<a href="#" class="text-blue-600 hover:underline">Read more</a> <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
<div class="flex items-center"> <div class="flex items-center">
<img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar"> <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a> <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
</div> </div>
</div> </div>
</div>` </div>`

24
src/components/ui/Cards/ArticleWithImage.vue
View file

@ -1,23 +1,23 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg"> <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
<div class="p-6"> <div class="p-6">
<div> <div>
<span class="text-blue-600 text-xs font-medium uppercase">Product</span> <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
<a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a> <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
<p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p> <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center"> <div class="flex items-center">
<img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar"> <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
</div> </div>
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span> <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
</div> </div>
</div> </div>
</div> </div>
@ -32,23 +32,23 @@
return { return {
name: 'Article With Image', name: 'Article With Image',
code: ` code: `
<div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg"> <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
<img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article"> <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
<div class="p-6"> <div class="p-6">
<div> <div>
<span class="text-blue-600 text-xs font-medium uppercase">Product</span> <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
<a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a> <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
<p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p> <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex items-center"> <div class="flex items-center">
<img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar"> <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
</div> </div>
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span> <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
</div> </div>
</div> </div>
</div> </div>

40
src/components/ui/Cards/ArticleWithSMIcons.vue
View file

@ -1,33 +1,33 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-md"> <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="text-sm font-light text-gray-800">Courses and MOOCs</span> <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
<span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span> <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
</div> </div>
<div> <div>
<h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1> <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
<p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p> <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
</div> </div>
<div> <div>
<div class="flex items-center mt-2 text-gray-700"> <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
<span>Visit on:</span> <span>Visit on:</span>
<a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a> <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
<span>or</span> <span>or</span>
<a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a> <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
</div> </div>
<div class="flex items-center justify-center mt-4"> <div class="flex items-center justify-center mt-4">
<a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer"> <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
<svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'> <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' 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'/> <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> </svg>
</a> </a>
<a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer"> <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
<svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/> <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/> <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
@ -47,33 +47,33 @@
return { return {
name: 'Article With SM icons', name: 'Article With SM icons',
code: ` code: `
<div class="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-md"> <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<span class="text-sm font-light text-gray-800">Courses and MOOCs</span> <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
<span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span> <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
</div> </div>
<div> <div>
<h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1> <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
<p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p> <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
</div> </div>
<div> <div>
<div class="flex items-center mt-2 text-gray-700"> <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
<span>Visit on:</span> <span>Visit on:</span>
<a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a> <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
<span>or</span> <span>or</span>
<a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a> <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
</div> </div>
<div class="flex items-center justify-center mt-4"> <div class="flex items-center justify-center mt-4">
<a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer"> <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
<svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'> <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' 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'/> <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> </svg>
</a> </a>
<a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer"> <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
<svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/> <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
<path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/> <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>

12
src/components/ui/Cards/Product.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="px-4 py-2"> <div class="px-4 py-2">
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1> <h1 class="text-gray-800 dark:text-white font-bold text-3xl uppercase">NIKE AIR</h1>
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
</div> </div>
<img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR"> <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
@ -24,10 +24,10 @@
return { return {
name: 'Product', name: 'Product',
code: ` code: `
<div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="px-4 py-2"> <div class="px-4 py-2">
<h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1> <h1 class="text-gray-800 dark:text-white font-bold text-3xl uppercase">NIKE AIR</h1>
<p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
</div> </div>
<img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR"> <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">

32
src/components/ui/Cards/ProductWithEvaluation.vue
View file

@ -1,24 +1,24 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div> <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
<div class="w-2/3 p-4 md:p-4"> <div class="w-2/3 p-4 md:p-4">
<h1 class="text-gray-800 font-bold text-2xl">Backpack</h1> <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p> <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
<div class="flex item-center mt-2"> <div class="flex item-center mt-2">
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
@ -32,8 +32,8 @@
</div> </div>
<div class="flex item-center justify-between mt-3"> <div class="flex item-center justify-between mt-3">
<h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1> <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
<button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button> <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
</div> </div>
</div> </div>
</div> </div>
@ -48,24 +48,24 @@
return { return {
name: 'Product With Evaluation', name: 'Product With Evaluation',
code:` code:`
<div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div> <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
<div class="w-2/3 p-4 md:p-4"> <div class="w-2/3 p-4 md:p-4">
<h1 class="text-gray-800 font-bold text-2xl">Backpack</h1> <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
<p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p> <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
<div class="flex item-center mt-2"> <div class="flex item-center mt-2">
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
<svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24"> <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
<path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/> <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
</svg> </svg>
@ -79,8 +79,8 @@
</div> </div>
<div class="flex item-center justify-between mt-3"> <div class="flex item-center justify-between mt-3">
<h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1> <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
<button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button> <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
</div> </div>
</div> </div>
</div>` </div>`

20
src/components/ui/Cards/SimpleProduct.vue
View file

@ -4,12 +4,12 @@
<div class="flex flex-col justify-center items-center max-w-sm mx-auto"> <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
<div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div> <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden"> <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
<h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3> <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
<div class="flex items-center justify-between py-2 px-3 bg-gray-200"> <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
<span class="text-gray-800 font-bold ">$129</span> <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
<button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button> <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
</div> </div>
</div> </div>
</div> </div>
@ -26,12 +26,12 @@
<div class="flex flex-col justify-center items-center max-w-sm mx-auto"> <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
<div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div> <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
<div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden"> <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
<h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3> <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
<div class="flex items-center justify-between py-2 px-3 bg-gray-200"> <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
<span class="text-gray-800 font-bold ">$129</span> <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
<button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button> <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
</div> </div>
</div> </div>
</div>` </div>`

20
src/components/ui/Cards/Testimonial.vue
View file

@ -1,17 +1,17 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 pb-6 pt-16" slot="component"> <div class="px-3 pb-6 pt-16" slot="component">
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg"> <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<div class="flex justify-center md:justify-end -mt-16"> <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"> <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" 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> </div>
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2> <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p> <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a> <a href="#" class="text-xl font-medium text-indigo-500 dark:text-indigo-300">John Doe</a>
</div> </div>
</div> </div>
</div> </div>
@ -24,17 +24,17 @@
return { return {
name: 'Testimonial', name: 'Testimonial',
code: ` code: `
<div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg"> <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<div class="flex justify-center md:justify-end -mt-16"> <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"> <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" 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> </div>
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2> <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p> <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a> <a href="#" class="text-xl font-medium text-indigo-500 dark:text-indigo-300">John Doe</a>
</div> </div>
</div>` </div>`
} }

12
src/components/ui/Cards/User.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto"> <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar"> <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
<div class="py-5 text-center"> <div class="py-5 text-center">
<a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a> <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
<span class="text-sm text-gray-700">Software Engineer</span> <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
</div> </div>
</div> </div>
</div> </div>
@ -19,12 +19,12 @@
return { return {
name: 'User', name: 'User',
code: ` code: `
<div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto"> <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar"> <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
<div class="py-5 text-center"> <div class="py-5 text-center">
<a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a> <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
<span class="text-sm text-gray-700">Software Engineer</span> <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
</div> </div>
</div>` </div>`
} }

24
src/components/ui/Cards/UserWithDetails.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<div class="flex items-center px-6 py-3 bg-gray-900"> <div class="flex items-center px-6 py-3 bg-gray-900">
@ -13,11 +13,11 @@
</div> </div>
<div class="py-4 px-6"> <div class="py-4 px-6">
<h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1> <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
<p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p> <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/> <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
</svg> </svg>
@ -25,7 +25,7 @@
<h1 class="px-2 text-sm">Meraki UI</h1> <h1 class="px-2 text-sm">Meraki UI</h1>
</div> </div>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
</svg> </svg>
@ -33,7 +33,7 @@
<h1 class="px-2 text-sm">California</h1> <h1 class="px-2 text-sm">California</h1>
</div> </div>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
</svg> </svg>
@ -52,7 +52,7 @@ export default {
return { return {
name: 'User With Details', name: 'User With Details',
code: ` code: `
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<div class="flex items-center px-6 py-3 bg-gray-900"> <div class="flex items-center px-6 py-3 bg-gray-900">
@ -64,11 +64,11 @@ export default {
</div> </div>
<div class="py-4 px-6"> <div class="py-4 px-6">
<h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1> <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
<p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p> <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/> <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
</svg> </svg>
@ -76,7 +76,7 @@ export default {
<h1 class="px-2 text-sm">Meraki UI</h1> <h1 class="px-2 text-sm">Meraki UI</h1>
</div> </div>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
</svg> </svg>
@ -84,7 +84,7 @@ export default {
<h1 class="px-2 text-sm">California</h1> <h1 class="px-2 text-sm">California</h1>
</div> </div>
<div class="flex items-center mt-4 text-gray-700"> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
</svg> </svg>

48
src/components/ui/Dropdowns/Notification.vue
View file

@ -3,41 +3,41 @@
<div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component"> <div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component">
<div class="relative"> <div class="relative">
<!-- Dropdown toggle button --> <!-- Dropdown toggle button -->
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none"> <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" /> <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg> </svg>
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20"> <div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
<div class="py-2"> <div class="py-2">
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Slick Net</span> start following you . 45m <span class="font-bold" href="#">Slick Net</span> start following you . 45m
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
</p> </p>
</a> </a>
</div> </div>
<a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a> <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
</div> </div>
</div> </div>
</div> </div>
@ -52,41 +52,41 @@
code: ` code: `
<div class="relative"> <div class="relative">
<!-- Dropdown toggle button --> <!-- Dropdown toggle button -->
<button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none"> <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" /> <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
</svg> </svg>
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;"> <div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
<div class="py-2"> <div class="py-2">
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Slick Net</span> start following you . 45m <span class="font-bold" href="#">Slick Net</span> start following you . 45m
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
</p> </p>
</a> </a>
<a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2"> <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
<img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar"> <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
<p class="text-gray-600 text-sm mx-2"> <p class="text-gray-600 dark:text-white text-sm mx-2">
<span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
</p> </p>
</a> </a>
</div> </div>
<a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a> <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
</div> </div>
</div>`, </div>`,
dropdownOpen: true dropdownOpen: true

32
src/components/ui/Dropdowns/Simple.vue
View file

@ -3,27 +3,27 @@
<div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component"> <div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component">
<div class="relative"> <div class="relative">
<!-- Dropdown toggle button --> <!-- Dropdown toggle button -->
<button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none"> <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg> </svg>
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20"> <div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
your profile your profile
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Your projects Your projects
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Help Help
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Settings Settings
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Sign Out Sign Out
</a> </a>
</div> </div>
@ -40,27 +40,27 @@
code: ` code: `
<div class="relative"> <div class="relative">
<!-- Dropdown toggle button --> <!-- Dropdown toggle button -->
<button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none"> <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
<svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg> </svg>
</button> </button>
<!-- Dropdown menu --> <!-- Dropdown menu -->
<div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20"> <div class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
your profile your profile
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Your projects Your projects
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Help Help
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Settings Settings
</a> </a>
<a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white"> <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
Sign Out Sign Out
</a> </a>
</div> </div>

24
src/components/ui/Footers/Simple.vue
View file

@ -1,25 +1,25 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row"> <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
<p class="py-2 text-gray-100 sm:py-0">All rights reserved</p> <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
<div class="flex -mx-2"> <div class="flex -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
@ -36,25 +36,25 @@
return { return {
name: 'Simple', name: 'Simple',
code: ` code: `
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row"> <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
<p class="py-2 text-gray-100 sm:py-0">All rights reserved</p> <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
<div class="flex -mx-2"> <div class="flex -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter"> <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>

92
src/components/ui/Footers/WithDetails.vue
View file

@ -1,31 +1,31 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<footer class="bg-gray-800"> <footer class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="lg:flex"> <div class="lg:flex">
<div class="w-full lg:w-2/5 -mx-6"> <div class="w-full lg:w-2/5 -mx-6">
<div class="px-6"> <div class="px-6">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div> </div>
<p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p> <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
<div class="flex mt-4 -mx-2"> <div class="flex mt-4 -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
@ -37,39 +37,39 @@
<div class="mt-6 lg:mt-0 lg:flex-1"> <div class="mt-6 lg:mt-0 lg:flex-1">
<div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4"> <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
<div> <div>
<h3 class="text-gray-100 uppercase">About</h3> <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Company</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
<a href="#" class="block mt-2 text-sm text-gray-400">community</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Careers</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Blog</h3> <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Tec</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Music</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Videos</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Products</h3> <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Contact</h3> <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
<span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span> <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
<span class="block mt-2 text-sm text-gray-400">example@email.com</span> <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr class="h-px my-6 bg-gray-700 border-none"> <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
<div> <div>
<p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p> <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
</div> </div>
</div> </div>
</footer> </footer>
@ -83,31 +83,31 @@
return { return {
name: 'With Details', name: 'With Details',
code: ` code: `
<footer class="bg-gray-800"> <footer class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-4"> <div class="container mx-auto px-6 py-4">
<div class="lg:flex"> <div class="lg:flex">
<div class="w-full lg:w-2/5 -mx-6"> <div class="w-full lg:w-2/5 -mx-6">
<div class="px-6"> <div class="px-6">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div> </div>
<p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p> <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
<div class="flex mt-4 -mx-2"> <div class="flex mt-4 -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
</a> </a>
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter"> <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
<svg class="h-4 w-4 fill-current" viewBox="0 0 512 512"> <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"/> <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> </svg>
@ -119,39 +119,39 @@
<div class="mt-6 lg:mt-0 lg:flex-1"> <div class="mt-6 lg:mt-0 lg:flex-1">
<div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4"> <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
<div> <div>
<h3 class="text-gray-100 uppercase">About</h3> <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Company</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
<a href="#" class="block mt-2 text-sm text-gray-400">community</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Careers</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Blog</h3> <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Tec</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Music</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Videos</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Products</h3> <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
<a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
<a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a> <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
</div> </div>
<div> <div>
<h3 class="text-gray-100 uppercase">Contact</h3> <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
<span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span> <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
<span class="block mt-2 text-sm text-gray-400">example@email.com</span> <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr class="h-px my-6 bg-gray-700 border-none"> <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
<div> <div>
<p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p> <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
</div> </div>
</div> </div>
</footer>` </footer>`

36
src/components/ui/Footers/WithSubscribeForm.vue
View file

@ -1,34 +1,34 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800"> <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
<div class="container py-6"> <div class="container py-6">
<h1 class="text-center text-lg font-bold lg:text-2xl"> <h1 class="text-center text-lg font-bold lg:text-2xl">
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more. Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
</h1> </h1>
<div class="flex justify-center mt-6"> <div class="flex justify-center mt-6">
<div class="bg-white rounded-md"> <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
<div class="flex flex-wrap justify-between md:flex-row"> <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-transparent" placeholder="Enter your email" aria-label="Enter your email"> <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" 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> <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
</div> </div>
</div> </div>
</div> </div>
<hr class="h-px mt-6 bg-gray-700 border-none"> <hr class="h-px mt-6 bg-gray-200 dark:bg-gray-700 border-none">
<div class="flex flex-col items-center justify-between mt-6 md:flex-row"> <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div> </div>
<div class="flex mt-4 md:m-0"> <div class="flex mt-4 md:m-0">
<div class="-mx-4"> <div class="-mx-4">
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
</div> </div>
</div> </div>
</div> </div>
@ -44,34 +44,34 @@
return { return {
name: 'With Subscribe Form', name: 'With Subscribe Form',
code: ` code: `
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800"> <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
<div class="container py-6"> <div class="container py-6">
<h1 class="text-center text-lg font-bold lg:text-2xl"> <h1 class="text-center text-lg font-bold lg:text-2xl">
Join 31,000+ other and never miss <br> out on new tips, tutorials, and more. Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
</h1> </h1>
<div class="flex justify-center mt-6"> <div class="flex justify-center mt-6">
<div class="bg-white rounded-md"> <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
<div class="flex flex-wrap justify-between md:flex-row"> <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-transparent" placeholder="Enter your email" aria-label="Enter your email"> <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" 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> <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
</div> </div>
</div> </div>
</div> </div>
<hr class="h-px mt-6 bg-gray-700 border-none"> <hr class="h-px mt-6 border-gray-300 dark:bg-gray-700 border-none">
<div class="flex flex-col items-center justify-between mt-6 md:flex-row"> <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a> <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div> </div>
<div class="flex mt-4 md:m-0"> <div class="flex mt-4 md:m-0">
<div class="-mx-4"> <div class="-mx-4">
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a> <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
</div> </div>
</div> </div>
</div> </div>

32
src/components/ui/Forms/Newsletter.vue
View file

@ -1,21 +1,21 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48"> <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700"> <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
<div class="py-6 px-6 md:px-8 md:py-0"> <div class="py-6 px-6 md:px-8 md:py-0">
<h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2> <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
<p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p> <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
</div> </div>
</div> </div>
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700"> <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
<form> <form>
<div class="flex flex-col rounded-lg border overflow-hidden lg:flex-row"> <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
<input class="py-3 px-6 bg-white text-gray-700 outline-none placeholder-gray-500 focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email"> <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" 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> <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
</div> </div>
</form> </form>
</div> </div>
@ -30,21 +30,21 @@
return { return {
name: 'Newsletter', name: 'Newsletter',
code: ` code: `
<div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48"> <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
<div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700"> <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
<div class="py-6 px-6 md:px-8 md:py-0"> <div class="py-6 px-6 md:px-8 md:py-0">
<h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2> <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
<p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p> <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
</div> </div>
</div> </div>
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700"> <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
<form> <form>
<div class="flex flex-col rounded-lg border overflow-hidden lg:flex-row"> <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
<input class="py-3 px-6 bg-white text-gray-700 outline-none placeholder-gray-500 focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email"> <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" 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> <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
</div> </div>
</form> </form>
</div> </div>

44
src/components/ui/Forms/Simple.vue
View file

@ -1,34 +1,34 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md"> <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2> <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
<form> <form>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div> <div>
<label class="text-gray-700" for="username">Username</label> <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="emailAddress">Email Address</label> <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="password">Password</label> <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label> <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
</div> </div>
<div class="flex justify-end mt-6"> <div class="flex justify-end mt-6">
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Update Account Information</button> <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
</div> </div>
</form> </form>
</div> </div>
@ -42,34 +42,34 @@
return { return {
name: 'Simple', name: 'Simple',
code: ` code: `
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md"> <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2> <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
<form> <form>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div> <div>
<label class="text-gray-700" for="username">Username</label> <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="emailAddress">Email Address</label> <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="password">Password</label> <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
<div> <div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label> <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring"> <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div> </div>
</div> </div>
<div class="flex justify-end mt-6"> <div class="flex justify-end mt-6">
<button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Update Account Information</button> <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
</div> </div>
</form> </form>
</div>` </div>`

44
src/components/ui/Heros/ECommerce.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<header class="bg-white"> <header class="bg-white dark:bg-gray-800">
<nav class="shadow"> <nav class="shadow">
<div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center"> <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<div @click="isOpen = !isOpen" class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -18,16 +18,16 @@
</div> </div>
</div> </div>
<div :class="isOpen ? 'block' : 'hidden'" class="md:flex items-center"> <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
<div class="flex flex-col md:flex-row md:mx-6"> <div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div> </div>
<div class="flex justify-center md:block"> <div class="flex justify-center md:block">
<a class="relative text-gray-700 hover:text-gray-600" href="#"> <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
@ -43,8 +43,8 @@
<div class="md:flex items-center"> <div class="md:flex items-center">
<div class="w-full md:w-1/2"> <div class="w-full md:w-1/2">
<div class="max-w-lg"> <div class="max-w-lg">
<h1 class="text-gray-800 text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1> <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p> <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
<button class="mt-6 px-3 py-2 bg-indigo-600 text-white text-xs uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button> <button class="mt-6 px-3 py-2 bg-indigo-600 text-white text-xs uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
</div> </div>
</div> </div>
@ -66,17 +66,17 @@
name: 'E-commerce', name: 'E-commerce',
isOpen: false, isOpen: false,
code: ` code: `
<header class="bg-white"> <header class="bg-white dark:bg-gray-800">
<nav class="shadow"> <nav class="shadow">
<div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center"> <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -87,14 +87,14 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="md:flex items-center"> <div class="md:flex items-center">
<div class="flex flex-col md:flex-row md:mx-6"> <div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div> </div>
<div class="flex justify-center md:block"> <div class="flex justify-center md:block">
<a class="relative text-gray-700 hover:text-gray-600" href="#"> <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
@ -110,8 +110,8 @@
<div class="md:flex items-center"> <div class="md:flex items-center">
<div class="w-full md:w-1/2"> <div class="w-full md:w-1/2">
<div class="max-w-lg"> <div class="max-w-lg">
<h1 class="text-gray-800 text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1> <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p> <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
<button class="mt-4 px-3 py-2 bg-indigo-600 text-white text-sm uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button> <button class="mt-4 px-3 py-2 bg-indigo-600 text-white text-sm uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
</div> </div>
</div> </div>

30
src/components/ui/Heros/WithBGImage.vue
View file

@ -2,16 +2,16 @@
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<header> <header>
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 "> <div class="container mx-auto px-6 py-3 ">
<div class="md:flex md:items-center md:justify-between"> <div class="md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-xl font-semibold text-gray-700"> <div class="text-xl font-semibold text-gray-700">
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<div @click="isOpen = !isOpen" class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -20,10 +20,10 @@
</div> </div>
<div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center"> <div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
</div> </div>
</div> </div>
</div> </div>
@ -50,17 +50,17 @@
isOpen: false, isOpen: false,
code: ` code: `
<header> <header>
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 "> <div class="container mx-auto px-6 py-3 ">
<div class="md:flex md:items-center md:justify-between"> <div class="md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-xl font-semibold text-gray-700"> <div class="text-xl font-semibold text-gray-700">
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -70,10 +70,10 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden -mx-4 md:flex md:items-center"> <div class="hidden -mx-4 md:flex md:items-center">
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
<a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a> <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
</div> </div>
</div> </div>
</div> </div>

36
src/components/ui/Heros/WithImage.vue
View file

@ -1,17 +1,17 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<header class="bg-white"> <header class="bg-white dark:bg-gray-800">
<nav class="px-6 py-3 shadow"> <nav class="px-6 py-3 shadow">
<div class="md:flex items-center justify-between"> <div class="md:flex items-center justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="md:hidden"> <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" aria-label="Toggle menu"> <button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path 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> <path 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> </svg>
@ -21,9 +21,9 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block"> <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div> </div>
</div> </div>
</nav> </nav>
@ -31,12 +31,12 @@
<div class="md:flex"> <div class="md:flex">
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2"> <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
<div class="max-w-xl"> <div class="max-w-xl">
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2> <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
<p class="mt-2 text-sm text-gray-500 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
<div class="flex mt-6"> <div class="flex mt-6">
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-800">Get Started</a> <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a> <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
</div> </div>
</div> </div>
@ -60,17 +60,17 @@
name: 'With Image', name: 'With Image',
isOpen: false, isOpen: false,
code: ` code: `
<header class="bg-white"> <header class="bg-white dark:bg-gray-800">
<nav class="px-6 py-3 shadow"> <nav class="px-6 py-3 shadow">
<div class="md:flex items-center justify-between"> <div class="md:flex items-center justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="md:hidden"> <div class="md:hidden">
<button type="button" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu"> <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
<path 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> <path 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> </svg>
@ -80,9 +80,9 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block"> <div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a> <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div> </div>
</div> </div>
</nav> </nav>
@ -90,12 +90,12 @@
<div class="md:flex"> <div class="md:flex">
<div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2"> <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
<div class="max-w-xl"> <div class="max-w-xl">
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2> <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
<p class="mt-2 text-sm text-gray-500 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p> <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
<div class="flex mt-6"> <div class="flex mt-6">
<a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-800">Get Started</a> <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
<a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a> <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
</div> </div>
</div> </div>

24
src/components/ui/Heros/WithPattern.vue
View file

@ -26,20 +26,20 @@
</div> </div>
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0"> <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg"> <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
<div class="p-5 text-center"> <div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2> <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
<form action="#"> <form action="#">
<div class="mt-4"> <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" aria-label="Email address"> <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" 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"> <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div> </div>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a> <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button> <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
</div> </div>
</form> </form>
</div> </div>
@ -83,20 +83,20 @@
</div> </div>
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0"> <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg"> <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
<div class="p-5 text-center"> <div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2> <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
<form action="#"> <form action="#">
<div class="mt-4"> <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" aria-label="Email address"> <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" 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"> <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
</div> </div>
<div class="mt-4 flex items-center justify-between"> <div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a> <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button> <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
</div> </div>
</form> </form>
</div> </div>

32
src/components/ui/Navbars/ECommerce.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center"> <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<div class="flex md:hidden"> <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" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -19,14 +19,14 @@
<div :class="isOpen ? '' : 'hidden'" class="md:flex items-center"> <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
<div class="flex flex-col md:flex-row md:mx-6"> <div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div> </div>
<div class="flex justify-center md:block"> <div class="flex justify-center md:block">
<a class="relative text-gray-700 hover:text-gray-600" href="#"> <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>
@ -48,16 +48,16 @@
name: 'E-Commerce', name: 'E-Commerce',
isOpen: false, isOpen: false,
code: ` code: `
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center"> <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -68,14 +68,14 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="md:flex items-center"> <div class="md:flex items-center">
<div class="flex flex-col md:flex-row md:mx-6"> <div class="flex flex-col md:flex-row md:mx-6">
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
<a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
</div> </div>
<div class="flex justify-center md:block"> <div class="flex justify-center md:block">
<a class="relative text-gray-700 hover:text-gray-600" href="#"> <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg> </svg>

36
src/components/ui/Navbars/WithAvatar.vue
View file

@ -1,17 +1,17 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3"> <div class="container mx-auto px-6 py-3">
<div class="md:flex md:items-center md:justify-between"> <div class="md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-xl font-semibold text-gray-700"> <div class="text-xl font-semibold text-gray-700">
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <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" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -22,14 +22,14 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="!isOpen ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1"> <div :class="!isOpen ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1">
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8"> <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
</div> </div>
<div class="flex items-center mt-4 md:mt-0"> <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" aria-label="show notifications"> <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 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"> <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"/> <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> </svg>
@ -40,7 +40,7 @@
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar"> <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
</div> </div>
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3> <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
</button> </button>
</div> </div>
</div> </div>
@ -58,17 +58,17 @@
name: 'With Avatar', name: 'With Avatar',
isOpen: false, isOpen: false,
code: ` code: `
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3"> <div class="container mx-auto px-6 py-3">
<div class="md:flex md:items-center md:justify-between"> <div class="md:flex md:items-center md:justify-between">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="text-xl font-semibold text-gray-700"> <div class="text-xl font-semibold text-gray-700">
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -79,14 +79,14 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden md:flex md:items-center md:justify-between flex-1"> <div class="hidden md:flex md:items-center md:justify-between flex-1">
<div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8"> <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
<a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a> <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
</div> </div>
<div class="flex items-center mt-4 md:mt-0"> <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" aria-label="show notifications"> <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 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"> <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"/> <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> </svg>
@ -97,7 +97,7 @@
<img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar"> <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
</div> </div>
<h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3> <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
</button> </button>
</div> </div>
</div> </div>

112
src/components/ui/Navbars/WithCategories.vue
View file

@ -1,22 +1,22 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3"> <div class="container mx-auto px-6 py-3">
<div class="flex flex-col md:flex-row md:justify-between md:items-center"> <div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen --> <!-- Search input on desktop screen -->
<div class="mx-10 hidden md:block"> <div class="mx-10 hidden md:block">
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search"> <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
</div> </div>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <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" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -27,10 +27,10 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'"> <div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'">
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1"> <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
</div> </div>
<div class="flex items-center py-2 -mx-1 md:mx-0"> <div class="flex items-center py-2 -mx-1 md:mx-0">
@ -46,26 +46,26 @@
</div> </div>
<div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden"> <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
</div> </div>
</div> </div>
</nav> </nav>
@ -88,22 +88,22 @@
} }
</style> </style>
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3"> <div class="container mx-auto px-6 py-3">
<div class="flex flex-col md:flex-row md:justify-between md:items-center"> <div class="flex flex-col md:flex-row md:justify-between md:items-center">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
<!-- Search input on desktop screen --> <!-- Search input on desktop screen -->
<div class="mx-10 hidden md:block"> <div class="mx-10 hidden md:block">
<input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search"> <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
</div> </div>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -114,10 +114,10 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="hidden md:flex items-center"> <div class="hidden md:flex items-center">
<div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1"> <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
<a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a> <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
</div> </div>
<div class="flex items-center py-2 -mx-1 md:mx-0"> <div class="flex items-center py-2 -mx-1 md:mx-0">
@ -133,26 +133,26 @@
</div> </div>
<div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden"> <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
<a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a> <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
</div> </div>
</div> </div>
</nav>`, </nav>`,

28
src/components/ui/Navbars/WithSearch.vue
View file

@ -1,16 +1,16 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 md:flex"> <div class="container mx-auto px-6 py-3 md:flex">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <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" aria-label="toggle menu"> <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -21,13 +21,13 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between"> <div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0"> <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
</div> </div>
<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" aria-label="Search"> <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
</div> </div>
</div> </div>
</div> </div>
@ -43,16 +43,16 @@
name: 'With Search', name: 'With Search',
isOpen: false, isOpen: false,
code: ` code: `
<nav class="bg-white shadow"> <nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3 md:flex"> <div class="container mx-auto px-6 py-3 md:flex">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<div> <div>
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a> <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<div class="flex md:hidden"> <div class="flex md:hidden">
<button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu"> <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current"> <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> <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> </svg>
@ -63,13 +63,13 @@
<!-- Mobile Menu open: "block", Menu closed: "hidden" --> <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="w-full hidden md:flex md:items-center md:justify-between"> <div class="w-full hidden md:flex md:items-center md:justify-between">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0"> <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a> <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
</div> </div>
<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" aria-label="Search"> <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
</div> </div>
</div> </div>
</div> </div>

20
src/components/ui/Paginations/Simple.vue
View file

@ -3,23 +3,23 @@
<div class="px-3 py-6" slot="component"> <div class="px-3 py-6" slot="component">
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<div class="flex"> <div class="flex">
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-500 rounded-md cursor-not-allowed"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
previous previous
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
1 1
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
2 2
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
3 3
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
Next Next
</a> </a>
</div> </div>
@ -35,23 +35,23 @@
name: 'Pagination', name: 'Pagination',
code: ` code: `
<div class="flex"> <div class="flex">
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-500 rounded-md cursor-not-allowed"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
previous previous
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
1 1
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
2 2
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
3 3
</a> </a>
<a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md"> <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
Next Next
</a> </a>
</div>` </div>`

36
src/components/ui/Sections/AboutMe.vue
View file

@ -1,37 +1,37 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<section class="bg-gray-800"> <section class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-8"> <div class="container mx-auto px-6 py-8">
<div class="lg:flex items-center"> <div class="lg:flex items-center">
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<h2 class="text-gray-100 text-3xl font-bold">Who I am</h2> <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
<p class="text-gray-400 lg:max-w-md mt-4"> <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam? Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
</p> </p>
<div class="flex items-center -mx-2 mt-6"> <div class="flex items-center -mx-2 mt-6">
<a class="mx-2" href="#" aria-label="Twitter"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Facebook"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Linkden"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Github"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
@ -41,7 +41,7 @@
<div class="mt-8 lg:mt-0 lg:w-1/2"> <div class="mt-8 lg:mt-0 lg:w-1/2">
<div class="flex items-center justify-center lg:justify-end"> <div class="flex items-center justify-center lg:justify-end">
<div class="max-w-lg"> <div class="max-w-lg">
<img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt=""> <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
</div> </div>
</div> </div>
</div> </div>
@ -58,37 +58,37 @@
return { return {
name: 'About Me', name: 'About Me',
code: ` code: `
<section class="bg-gray-800"> <section class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-8"> <div class="container mx-auto px-6 py-8">
<div class="lg:flex items-center"> <div class="lg:flex items-center">
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<h2 class="text-gray-100 text-3xl font-bold">Who I am</h2> <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
<p class="text-gray-400 lg:max-w-md mt-4"> <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam? Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
</p> </p>
<div class="flex items-center -mx-2 mt-6"> <div class="flex items-center -mx-2 mt-6">
<a class="mx-2" href="#" aria-label="Twitter"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Facebook"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Linkden"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
<a class="mx-2" href="#" aria-label="Github"> <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"> <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" 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"/> <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> </svg>
</a> </a>
@ -98,7 +98,7 @@
<div class="mt-8 lg:mt-0 lg:w-1/2"> <div class="mt-8 lg:mt-0 lg:w-1/2">
<div class="flex items-center justify-center lg:justify-end"> <div class="flex items-center justify-center lg:justify-end">
<div class="max-w-lg"> <div class="max-w-lg">
<img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt=""> <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
</div> </div>
</div> </div>
</div> </div>

28
src/components/ui/Sections/Feature.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<section class="bg-white"> <section class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-8"> <div class="container mx-auto px-6 py-8">
<div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div> <div>
@ -9,9 +9,9 @@
<path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/> <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
<div> <div>
@ -19,9 +19,9 @@
<path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/> <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
<div> <div>
@ -29,9 +29,9 @@
<g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs> <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@
return { return {
name: 'Feature', name: 'Feature',
code: ` code: `
<section class="bg-white"> <section class="bg-white dark:bg-gray-800">
<div class="container mx-auto px-6 py-8"> <div class="container mx-auto px-6 py-8">
<div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3"> <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div> <div>
@ -54,9 +54,9 @@
<path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/> <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
<div> <div>
@ -64,9 +64,9 @@
<path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/> <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
<div> <div>
@ -74,9 +74,9 @@
<g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs> <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
</svg> </svg>
<h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1> <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
<p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p> <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
</div> </div>
</div> </div>
</div> </div>

40
src/components/ui/Sections/OurTeam.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<section class="bg-white container mx-auto p-6"> <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2> <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8"> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
@ -10,8 +10,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
<span class="mt-1 font-medium text-gray-600">CEO</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
</div> </div>
</div> </div>
@ -19,8 +19,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Jane Doe</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
<span class="mt-1 font-medium text-gray-600">Co-founder</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
</div> </div>
</div> </div>
@ -28,8 +28,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Steve Ben</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
<span class="mt-1 font-medium text-gray-600">UI/UX</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
</div> </div>
</div> </div>
@ -37,8 +37,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
<span class="mt-1 font-medium text-gray-600">Software Engineer</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
</div> </div>
</div> </div>
</div> </div>
@ -54,8 +54,8 @@
return { return {
name: 'Our Team', name: 'Our Team',
code: ` code: `
<section class="bg-white container mx-auto p-6"> <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
<h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2> <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8"> <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
@ -63,8 +63,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
<span class="mt-1 font-medium text-gray-600">CEO</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
</div> </div>
</div> </div>
@ -72,8 +72,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Jane Doe</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
<span class="mt-1 font-medium text-gray-600">Co-founder</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
</div> </div>
</div> </div>
@ -81,8 +81,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Steve Ben</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
<span class="mt-1 font-medium text-gray-600">UI/UX</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
</div> </div>
</div> </div>
@ -90,8 +90,8 @@
<img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/> <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
<div class="mt-2"> <div class="mt-2">
<h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3> <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
<span class="mt-1 font-medium text-gray-600">Software Engineer</span> <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
</div> </div>
</div> </div>
</div> </div>

22
src/components/ui/Sections/ParagraphWithImage.vue
View file

@ -1,18 +1,18 @@
<template> <template>
<view-component :name="name" :code="code"> <view-component :name="name" :code="code">
<div class="py-6" slot="component"> <div class="py-6" slot="component">
<section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center"> <section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
<div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"> <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div> <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
</div> </div>
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2"> <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
<h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2> <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p> <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8"> <div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a> <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-700">Start Now</a>
</div> </div>
</div> </div>
</div> </div>
@ -27,15 +27,15 @@
return { return {
name: 'Paragraph With Image', name: 'Paragraph With Image',
code: ` code: `
<section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center"> <section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
<div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg"> <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
<div class="lg:w-1/2"> <div class="lg:w-1/2">
<div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div> <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
</div> </div>
<div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2"> <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
<h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2> <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p> <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8"> <div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a> <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>

16
src/components/utilities/ViewComponent.vue
View file

@ -1,26 +1,26 @@
<template> <template>
<div class="bg-gray-300 border rounded-md overflow-hidden mb-12"> <div class="bg-gray-300 dark:bg-gray-600 border dark:border-gray-600 rounded-md overflow-hidden mb-12">
<div class="bg-white px-4 py-2 border-b"> <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b dark:border-gray-600">
<div class="flex flex-col md:flex-row justify-between items-center"> <div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center"> <div class="flex items-center">
<h3 class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</h3> <h3 class="text-gray-700 dark:text-gray-200 font-medium capitalize md:text-lg">{{ name }}</h3>
</div> </div>
<div class="mt-4 md:mt-0"> <div class="mt-4 md:mt-0">
<app-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"> <app-button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none"> <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="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
<path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" /> <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
</svg> </svg>
</app-button> </app-button>
<app-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"> <app-button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg> </svg>
</app-button> </app-button>
<app-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"> <app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 dark:bg-gray-700 dark:text-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="Copy">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 2" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 2" />
</svg> </svg>
@ -36,8 +36,8 @@
<transition name="fade"> <transition name="fade">
<div v-if="copied"> <div v-if="copied">
<div class="w-full h-full absolute top-0 left-0 z-50"> <div class="w-full h-full absolute top-0 left-0 z-50">
<div class="bg-gray-300 h-full flex items-center justify-center"> <div class="bg-gray-300 dark:bg-gray-700 h-full flex items-center justify-center">
<p class="text-gray-700 text-2xl">Copied!</p> <p class="text-gray-700 dark:text-gray-200 text-2xl">Copied!</p>
</div> </div>
</div> </div>
</div> </div>

1
tailwind.config.js
View file

@ -1,5 +1,6 @@
module.exports = { module.exports = {
purge: ["./src/**/*.vue"], purge: ["./src/**/*.vue"],
darkMode: "class",
theme: { theme: {
extend: { extend: {
fontFamily: { fontFamily: {