cheveguerra/bot-whatsapp
1
0
Fork 0
mirror of https://github.com/cheveguerra/bot-whatsapp.git synced 2026-04-18 11:39:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: ⚡ added contributors

Browse Source
This commit is contained in:
Leifer Mendez
2022-12-27 20:48:58 +01:00
parent 484c8c3bde
commit 7f437d0587
8 changed files with 238 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/docs/src/components/icons/IconArrowDownRight.tsx
View File

@@ -18,10 +18,6 @@ export const IconArrowDownRight = (props: ItemProps) => {
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="7" y1="7" x2="17" y2="17"></line>
<polyline points="17 8 17 17 8 17"></polyline>
</svg>
></svg>
)
}

16
packages/docs/src/components/widgets/CallToAction.tsx
View File

@@ -1,17 +1,23 @@
import { component$ } from '@builder.io/qwik'
import { $, component$, QwikMouseEvent } from '@builder.io/qwik'
export const handleVideo = $((ev: QwikMouseEvent<HTMLVideoElement>) => {
const targetVideo = ev.target as HTMLVideoElement
targetVideo.play()
})
export default component$(() => {
return (
<section class="relative">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-12 md:py-20">
<section class="relative border-t border-gray-200 dark:border-slate-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6 ">
<div class="py-0 md:py-5">
<video
class={'cursor-pointer'}
onClick$={handleVideo}
style={'height:600px'}
width="100%"
height="400"
autoPlay
muted
loop
playsInline
>
<source

32
packages/docs/src/components/widgets/Collaborator.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { component$ } from '@builder.io/qwik'
export default component$(
(props: {
user: {
id: number
login: string
html_url: string
avatar_url: string
}
}) => {
return (
<figure class="bg-gray-50 rounded p-4 dark:bg-slate-800">
<a href={props.user.html_url} target="_blank">
<img
class="w-16 h-16 rounded-full mx-auto object-cover"
src={props.user.avatar_url}
alt={props.user.login}
width="384"
height="512"
/>
</a>
<div class="pt-2 space-y-4 justify-center flex">
<figcaption class="text-sm">
<div class={'font-semibold'}>{props.user.login}</div>
</figcaption>
</div>
</figure>
)
}
)

99
packages/docs/src/components/widgets/Collaborators.tsx
View File

@@ -1,46 +1,61 @@
import { component$ } from '@builder.io/qwik'
import { component$, Resource, useResource$ } from '@builder.io/qwik'
import Collaborator from './Collaborator'
import { Octokit } from '@octokit/core'
export default component$(() => {
export const octokit = new Octokit({
auth: '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',
})
export const apiGetCollaborators = () =>
octokit.request(
'GET /repos/codigoencasa/bot-whatsapp/contributors{?anon,per_page,page}',
{
owner: 'OWNER',
repo: 'REPO',
}
)
export const TaleUsers = component$((props: { users: any[] }) => {
return (
<div class={'pt-4'}>
<div class="flex items-center space-x-2 text-base">
<h4 class="font-semibold text-slate-900">Contributors</h4>
<span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">
204
</span>
</div>
<div class="mt-3 flex -space-x-2 overflow-hidden">
<img
class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<img
class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<img
class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt=""
/>
<img
class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<img
class="inline-block h-12 w-12 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div class="mt-3 text-sm font-medium">
<a href="#" class="text-blue-500">
+ 198 others
</a>
</div>
</div>
<>
{props.users.map((user) => (
<div class="col-span-2 ">
{' '}
<Collaborator user={user} />
</div>
))}
</>
)
})
export default component$(() => {
const collaboratorsResource = useResource$(
async () => await (await apiGetCollaborators()).data
)
return (
<section class="relative ">
<div class={'px-4 py-16 mx-auto max-w-6xl lg:py-20'}>
<div class="mb-10 md:mx-auto sm:text-center md:mb-12 max-w-3xl">
<p class="text-base text-primary-600 dark:text-purple-200 font-semibold tracking-wide uppercase">
Colaboradores
</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
Super estrellas
</h2>
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400">
Todo es posible gracias a el mayor recursos de todos, el
recurso humano. Tu tambien puedes formar parte
</p>
</div>
<div class="grid lg:grid-cols-12 grid-cols-1 gap-4 ">
<Resource
value={collaboratorsResource}
onResolved={(data) => <TaleUsers users={data} />}
></Resource>
</div>
</div>
</section>
)
})