Fix image and add practical info

Author: ch0rizo

lego-webapp/pages/lending/@lendableObjectId/+Page.tsx

@@ -1,26 +1,37 @@
-import { Page, LinkButton, Image, Card, Flex } from '@webkom/lego-bricks';
-import { Package } from 'lucide-react';
+import { Page, LinkButton, Image, Card } from '@webkom/lego-bricks';
+import { Package, Contact, Tag } from 'lucide-react';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Dateish } from 'app/models';
-import {
-  ContentMain,
-  ContentSection,
-  ContentSidebar,
-} from '~/components/Content';
 import DisplayContent from '~/components/DisplayContent';
+import { readmeIfy } from '~/components/ReadmeLogo';
 import TextWithIcon from '~/components/TextWithIcon';
 import { useFetchedLendableObject } from '~/pages/lending/@lendableObjectId/useFetchedLendableObject';
+import { useAppSelector } from '~/redux/hooks';
+import { selectGroupsByIds } from '~/redux/slices/groups';
+import { LENDABLE_CATEGORY } from '~/utils/constants';
+import truncateString from '~/utils/truncateString';
 import { useParams } from '~/utils/useParams';
 import LendingCalendar from './LendingCalendar';
 import LendingRequestEditor from './LendingRequestEditor';
 import styles from './Page.module.css';
 
+export const formatGroups = (groups: { name: string }[]) => {
+  return groups.length > 0 ? groups.map((g) => g.name).join(', ') : 'Ukjent';
+};
+
 export const LendableObjectList = () => {
   const { lendableObjectId } = useParams<{ lendableObjectId: string }>();
   const { lendableObject, fetching } = useFetchedLendableObject(
     lendableObjectId!,
   );
+
+  const responsibleGroups = useAppSelector((state) =>
+    selectGroupsByIds(state, lendableObject?.responsibleGroups),
+  );
+
+  const formattedGroups = formatGroups(responsibleGroups) || '';
+
   const [range, setRange] = useState<[Dateish, Dateish] | undefined>();
 
   const title = lendableObject ? `Utlån: ${lendableObject.title}` : undefined;
@@ -51,24 +62,42 @@ export const LendableObjectList = () => {
                 </Card>
               )}
               <DisplayContent content={lendableObject.description} />
-              <TextWithIcon
-                iconNode={<Package />}
-                size={20}
-                content={lendableObject.location}
-              />
             </div>
             {lendableObject.image && (
-              <Card className={styles.card}>
-                <Image
-                  className={styles.image}
-                  alt="image of lendeable object"
-                  src={lendableObject.image}
-                />
-              </Card>
+              <div className={styles.infoRight}>
+                <Card className={styles.imageCard}>
+                  <Image
+                    className={styles.image}
+                    alt="image of lendeable object"
+                    src={lendableObject.image}
+                  />
+                </Card>
+                <Card className={styles.practicalInfo}>
+                  <h4>Praktisk Info:</h4>
+                  <TextWithIcon
+                    iconNode={<Contact />}
+                    size={20}
+                    gap={'var(--spacing-xs)'}
+                    content={readmeIfy(truncateString(formattedGroups, 15))}
+                  />
+                  <TextWithIcon
+                    iconNode={<Package />}
+                    size={20}
+                    gap={'var(--spacing-xs)'}
+                    content={lendableObject.location}
+                  />
+                  <TextWithIcon
+                    iconNode={<Tag />}
+                    size={20}
+                    gap={'var(--spacing-xs)'}
+                    content={LENDABLE_CATEGORY[lendableObject.category]}
+                  />
+                </Card>
+              </div>
             )}
           </div>
-          <div className={styles.border} />
-          <div>
+          <div className={styles.border}></div>
+          <div className={styles.lendingCalendar}>
             <LendingCalendar
               selectedRange={range}
               lendableObjectId={lendableObjectId}

lego-webapp/pages/lending/@lendableObjectId/Page.module.css

@@ -1,12 +1,52 @@
 @import url('styles/custom-media.css');
 
-.card {
-  margin: var(--spacing-md) 0;
+.container {
+  margin: var(--spacing-sm) 0;
+  font-size: var(--font-size-md);
+}
+
+.infoRight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+}
+
+.info {
+  display: flex;
+  gap: var(--spacing-md);
+  font-size: var(--font-size-md);
+  position: relative;
+
+  @media (--small-viewport) {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+}
+
+.imageCard {
   padding: 0;
   width: 250px;
+  height: fit-content;
+}
+
+.practicalInfo {
+  padding: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  gap: var(--spacing-xs);
+
+  @media (--small-viewport) {
+    display: none;
+  }
+}
+
+.practicalInfo > h4 {
+  color: var(--lego-font-color);
+  font-size: var(--font-size-md);
+  margin-bottom: var(--spacing-xs);
 }
 
 .border {
+  margin: var(--spacing-md) 0;
   border-bottom: 2px solid var(--border-gray);
 }
 
@@ -18,19 +58,3 @@
 .description {
   flex-grow: 1;
 }
-
-.container {
-  margin: var(--spacing-sm) 0;
-  font-size: var(--font-size-md);
-  color: var(--color-gray-6);
-}
-
-.info {
-  font-size: var(--font-size-md);
-  display: flex;
-
-  @media (--small-viewport) {
-    flex-direction: column-reverse;
-    align-items: center;
-  }
-}