mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-18 11:39:15 +00:00
docs: ✨ updated
This commit is contained in:
Leifer Mendez
14
packages/docs/src/components/widgets/Alert.tsx
Normal file
14
packages/docs/src/components/widgets/Alert.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { component$, Slot } from '@builder.io/qwik'
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<div
|
||||
class="p-4 border border-slate-200 rounded my-2 bg-gray-50 dark:border-gray-600 dark:bg-gray-700"
|
||||
role="alert"
|
||||
>
|
||||
<div class=" mb-2 text-md ">
|
||||
<Slot />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
@@ -50,7 +50,7 @@ export default component$(() => {
|
||||
]
|
||||
|
||||
return (
|
||||
<footer class="border-t border-gray-200 dark:border-slate-800">
|
||||
<footer class="">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="grid grid-cols-12 gap-4 gap-y-8 sm:gap-8 py-8 md:py-12">
|
||||
<div class="col-span-12 lg:col-span-4 pr-8">
|
||||
|
||||
@@ -1,28 +1,31 @@
|
||||
import { component$, useStore } from '@builder.io/qwik'
|
||||
import { component$, useContext, useStore } from '@builder.io/qwik'
|
||||
import Logo from '~/components/atoms/Logo'
|
||||
import { IconGithub } from '~/components/icons/IconGithub'
|
||||
import ToggleTheme from '~/components/core/ToggleTheme'
|
||||
import ToggleMenu from '~/components/core/ToggleMenu'
|
||||
import { IconDiscord } from '../icons/IconDiscord'
|
||||
import { GlobalStore } from '~/contexts'
|
||||
|
||||
export default component$(() => {
|
||||
const store = useStore({
|
||||
const storeScroll = useStore({
|
||||
isScrolling: false,
|
||||
})
|
||||
|
||||
const store = useContext(GlobalStore)
|
||||
|
||||
return (
|
||||
<header
|
||||
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all ${
|
||||
store.isScrolling
|
||||
class={`sticky top-0 z-40 flex-none mx-auto w-full transition-all border border-b-slate-100 dark:border-b-slate-800 border-x-0 border-t-0 ${
|
||||
storeScroll.isScrolling
|
||||
? ' md:bg-white/90 md:backdrop-blur-sm dark:md:bg-slate-900/90 bg-white dark:bg-slate-900'
|
||||
: ''
|
||||
}`}
|
||||
id="header"
|
||||
window:onScroll$={() => {
|
||||
if (!store.isScrolling && window.scrollY >= 10) {
|
||||
store.isScrolling = true
|
||||
} else if (store.isScrolling && window.scrollY < 10) {
|
||||
store.isScrolling = false
|
||||
if (!storeScroll.isScrolling && window.scrollY >= 10) {
|
||||
storeScroll.isScrolling = true
|
||||
} else if (storeScroll.isScrolling && window.scrollY < 10) {
|
||||
storeScroll.isScrolling = false
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -41,46 +44,28 @@ export default component$(() => {
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
|
||||
{/* <li class="dropdown">
|
||||
<li class="dropdown">
|
||||
<button class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out">
|
||||
Pages
|
||||
Documentación
|
||||
</button>
|
||||
<ul class="dropdown-menu rounded md:absolute pl-4 md:pl-0 md:hidden font-medium md:bg-white md:min-w-[200px] dark:md:bg-slate-800 drop-shadow-xl">
|
||||
<li>
|
||||
<a
|
||||
class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="font-medium rounded-b md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href="#"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
{store.map((ctx) => {
|
||||
return ctx.list.map((listCtx) => {
|
||||
return (
|
||||
<li>
|
||||
<a
|
||||
class="font-medium rounded-t md:hover:bg-gray-100 dark:hover:bg-gray-700 py-2 px-4 block whitespace-no-wrap"
|
||||
href={listCtx.link}
|
||||
>
|
||||
{listCtx.name}
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
})
|
||||
})}
|
||||
</ul>
|
||||
</li> */}
|
||||
<li>
|
||||
<a
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
href={'/docs'}
|
||||
>
|
||||
Documentación
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
{/* <li>
|
||||
<a
|
||||
target={'_blank'}
|
||||
class="font-medium hover:text-gray-900 dark:hover:text-white px-4 py-3 flex items-center transition duration-150 ease-in-out"
|
||||
@@ -90,7 +75,7 @@ export default component$(() => {
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
</li> */}
|
||||
<li class="md:hidden">
|
||||
<a
|
||||
target={'_blank'}
|
||||
|
||||
@@ -17,15 +17,12 @@ export default component$(() => {
|
||||
<div class="pb-12 md:pb-0 md:py-0 max-w-5xl mx-auto md:pr-16 flex items-center basis-[56%]">
|
||||
<div>
|
||||
<h1 class="text-5xl md:text-[3.48rem] font-bold leading-tighter tracking-tighter mb-4 font-heading px-4 md:px-0">
|
||||
Construye tu
|
||||
Crear chatbot{' '}
|
||||
<span class="sm:whitespace-nowrap text-[#25b637]">
|
||||
Chatbot
|
||||
</span>{' '}
|
||||
<br class="hidden lg:block" />{' '}
|
||||
<span class="hidden lg:inline">
|
||||
para{' '}
|
||||
<span class="text-[#25b637]">Whatsapp</span>{' '}
|
||||
WhatsApp
|
||||
</span>
|
||||
<br class="hidden lg:block" />{' '}
|
||||
<span class="lg:inline">en minutos</span>
|
||||
</h1>
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<p class="text-xl text-gray-600 mb-8 dark:text-slate-400">
|
||||
@@ -35,7 +32,6 @@ export default component$(() => {
|
||||
<span class="font-semibold underline decoration-wavy decoration-1 decoration-secondary-600 underline-offset-2">
|
||||
puedes configurar respuestas
|
||||
automatizadas para preguntas frecuentes
|
||||
|
||||
</span>{' '}
|
||||
, recibir y responder mensajes de manera
|
||||
automatizada, y hacer un seguimiento de las
|
||||
|
||||
@@ -1,19 +1,12 @@
|
||||
import { component$ } from '@builder.io/qwik'
|
||||
import { useLocation } from '@builder.io/qwik-city'
|
||||
import { Link, useLocation } from '@builder.io/qwik-city'
|
||||
import { DocumentationCtx } from '~/contexts'
|
||||
|
||||
/**
|
||||
* options = [] array con la lista de opciones de la documentacion
|
||||
*/
|
||||
export default component$(
|
||||
({
|
||||
options = [],
|
||||
}: {
|
||||
options: {
|
||||
title: string
|
||||
link?: string
|
||||
list: { link: string; name: string }[]
|
||||
}[]
|
||||
}) => {
|
||||
({ options = [] }: { options: DocumentationCtx[] }) => {
|
||||
return (
|
||||
<div>
|
||||
{options.map((item, i) => (
|
||||
@@ -47,7 +40,7 @@ export const LiComponent = component$(
|
||||
<ul class="space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">
|
||||
{porps.list.map((opt) => (
|
||||
<li>
|
||||
<a
|
||||
<Link
|
||||
class={[
|
||||
currentPage === `${opt.link}/`
|
||||
? 'font-semibold'
|
||||
@@ -57,7 +50,7 @@ export const LiComponent = component$(
|
||||
href={opt.link}
|
||||
>
|
||||
{opt.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user