front/src/components/TestCard.jsx - main - TimurIsm/OpenEyes

front/src/components/TestCard.jsx

41 строка2 KB

IsmTimur

Initial commit: added backend (Express) and frontend (React Vite)

19 июн 2025, 18:32

19 июн 2025, 18:326cf6155

import React from 'react';
import { Link } from 'react-router-dom';
import { PATHS } from '../route/RoutesConsts';

const TestCard = ({ test }) => {
    return (
        <div className="w-full max-w-xs sm:max-w-sm md:max-w-md mx-auto bg-white border border-gray-300 rounded-xl shadow-md flex flex-col">
            <img className="rounded-t-lg w-full h-64 object-cover" src={test.main_image} alt={test.type} />
            <div className="p-5 flex flex-col flex-grow">
                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 break-words">{test.type}</h5>
                <p className="mb-3 font-normal text-gray-700 break-words">{test.short_description}</p>
                <div className="mt-auto flex justify-end">
                    <Link
                        to={`${PATHS.TESTS}/${test.id}`}
                        className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 
                        rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
                    >
                        Пройти тест
                        <svg
                            className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 14 10"
                        >
                            <path
                                stroke="currentColor"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth="2"
                                d="M1 5h12m0 0L9 1m4 4L9 9"
                            />
                        </svg>
                    </Link>
                </div>
            </div>
        </div>
    );
};

export default TestCard;