mirror of
https://github.com/cheveguerra/bot-whatsapp.git
synced 2026-04-18 11:39:15 +00:00
docs: ⚡ added contributors
This commit is contained in:
Leifer Mendez
@@ -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
32
packages/docs/src/components/widgets/Collaborator.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
)
|
||||
@@ -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>
|
||||
)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user