fix: add line clamp

components/composited/ProjectCard/ProjectCard.tsx

@@ -1,4 +1,5 @@
 import { FormEventHandler, Fragment, useCallback, useState } from 'react';
+import { clsx as cx } from 'clsx';
 import { Badge } from '../../generic/Badge/Badge';
 import { Heading } from '../../generic/Heading/Heading';
 import { ExpandLessIcon } from '../../generic/Icons/ExpandLessIcon';
@@ -14,9 +15,10 @@ type ProjectCardProps = {
 
 export const ProjectCard = ({ fields }: ProjectCardProps) => {
   const [expanded, setExpanded] = useState(false);
-  const toggleExpanded = useCallback(() => setExpanded((p) => !p), []);
   const [userVoted, setUserVoted] = useState(fields.voted);
 
+  const toggleExpanded = useCallback(() => setExpanded((p) => !p), []);
+
   const handleUserVote: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     // @todo Skczu (I hope) When user clicks, set state to true, send POST, if error - display error & set state to false
@@ -29,9 +31,13 @@ export const ProjectCard = ({ fields }: ProjectCardProps) => {
         <Heading content={fields.title} as="h2" variant="baseSemibold" />
         {fields.voted && <Badge color="amber" textContent="Wspierasz" />}
       </div>
+      <Text
+        className={cx('mb-6 whitespace-pre-wrap w-11/12', !expanded && 'line-clamp-2 mb-2')}
+        as="p"
+        content={fields.description}
+      />
       {expanded ? (
         <Fragment>
-          <Text className="mb-6 whitespace-pre-wrap w-11/12" as="p" content={fields.description} />
           <ProjectInfoList
             items={[
               {
@@ -40,7 +46,7 @@ export const ProjectCard = ({ fields }: ProjectCardProps) => {
               },
               {
                 label: 'Data realizacji',
-                value: fields.estimatedRealisationDate,
+                value: new Date(fields.estimatedRealisationDate).toLocaleDateString(),
               },
               {
                 label: 'Miejsce',
@@ -59,11 +65,6 @@ export const ProjectCard = ({ fields }: ProjectCardProps) => {
         </Fragment>
       ) : (
         <Fragment>
-          <Text
-            className="mb-6 whitespace-pre-wrap w-11/12"
-            as="p"
-            content={fields.description.slice(0, 120) + '...'}
-          />
           <button className="flex items-center gap-2" onClick={toggleExpanded}>
             <span className="w-fit text-xs leading-4 font-semibold text-blue-800 sm:leading-5 sm:text-sm lg:text-base lg:leading-6 focus:text-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
               Rozwiń szczegółowy opis

package.json

@@ -27,6 +27,7 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

tailwind.config.js

@@ -10,5 +10,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/forms')],
+  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')],
 };

validators/Project.ts

@@ -3,9 +3,7 @@ import { z } from 'zod';
 export const ProjectSch = z.object({
   title: z.string(),
   description: z.string(),
-  // cost as string for display
   estimatedCost: z.number(),
-  // don't need to use z.date() here, it's also only for displaying the data, not POSTing
   estimatedRealisationDate: z.string(),
   place: z.string(),
   voted: z.boolean(),