jalvarado
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { GetCuestionario } from '@/types/cuestionario';
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import Button from './button';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface Props {
|
|
cuestionario: GetCuestionario;
|
|
link: string;
|
|
button_message?: string;
|
|
}
|
|
|
|
export default function FormularioCard({
|
|
cuestionario,
|
|
link,
|
|
button_message,
|
|
}: Props) {
|
|
const router = useRouter();
|
|
const [verMas, setVerMas] = useState(false);
|
|
const descripcion = cuestionario.descripcion;
|
|
const limite = 100;
|
|
|
|
const descripcionRecortada =
|
|
descripcion.length > limite && !verMas
|
|
? `${descripcion.slice(0, limite)}...`
|
|
: descripcion;
|
|
|
|
return (
|
|
<div className="card card-blog d-flex flex-column justify-content-between">
|
|
<div>
|
|
<div className="card-image scale-hover-1">
|
|
<Link href={link}>
|
|
<Image
|
|
width={400}
|
|
height={300}
|
|
className="img"
|
|
src="/feriasex.jpg"
|
|
alt="Banner formulario"
|
|
/>
|
|
<div className="card-caption">{cuestionario.nombre_form}</div>
|
|
</Link>
|
|
<div className="ripple-cont"></div>
|
|
</div>
|
|
|
|
<div className="table px-3 pt-3 mb-0">
|
|
<h6 className="category text-info">
|
|
{cuestionario.id_tipo_cuestionario === 1 ? 'Feria' : 'Evento'}
|
|
</h6>
|
|
<p className="card-description mb-0">
|
|
{descripcionRecortada}
|
|
{descripcion.length > limite && (
|
|
<button
|
|
onClick={() => setVerMas(!verMas)}
|
|
className="btn btn-link btn-sm p-0 ms-1 align-baseline"
|
|
style={{ fontSize: '0.875rem' }}
|
|
>
|
|
{verMas ? 'Ver menos' : 'Ver más'}
|
|
</button>
|
|
)}
|
|
</p>
|
|
{button_message && (
|
|
<Button
|
|
onClick={() => router.push(link)}
|
|
outline
|
|
className="mt-3 w-100 py-1 rounded"
|
|
variant="azul"
|
|
>
|
|
{button_message}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|