Merge branch 'feat/room-space-list' into 'main'

feature: room and space list

Closes #13

See merge request software/fabcity-interfacer-ui!15

src/components/ElementList.tsx

+import React from "react";
+import { Link } from "@components/Link";
+import { ChevronRight, UserMultiple } from "@carbon/icons-react";
+
+interface RoomListProps {
+  title?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const RoomList: React.FC<RoomListProps> = ({
+  title,
+  children,
+  className = "",
+}) => {
+  return (
+    <div className={className}>
+      {title && (
+        <h4 className="font-karla text-3xl leading-9 font-bold text-grey-900 tracking-tighter">
+          {title}
+        </h4>
+      )}
+      <div className="flex flex-col gap-2 mt-5">{children}</div>
+    </div>
+  );
+};
+
+interface SpaceProps {
+  title?: string;
+  target: string;
+  name: string;
+  description: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  members: number;
+  tag: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const RoomSpace: React.FC<SpaceProps> = ({
+  title,
+  target,
+  name,
+  description,
+  image,
+  members,
+  tag,
+  children,
+  className = "",
+}) => {
+  return (
+    <div className={className}>
+      {title && (
+        <h4 className="font-karla text-3xl leading-9 font-bold text-grey-900 tracking-tighter">
+          {title}
+        </h4>
+      )}
+      <div className="rounded-lg bg-grey-200 p-2 mt-5">
+        <div>
+          <Space
+            target={target}
+            name={name}
+            tag={tag}
+            description={description}
+            image={image}
+            members={members}
+          />
+        </div>
+        <div className="flex flex-col gap-2 bg-white">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+interface RoomProps {
+  target: string;
+  name: string;
+  description: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  members: number;
+  tag: string;
+}
+
+export const Room: React.FC<RoomProps> = ({
+  target,
+  name,
+  description,
+  image,
+  members,
+  tag,
+}) => {
+  return (
+    <Link
+      className="block bg-white hover:bg-grey-900 border border-transparent focus:border-grey-900 transition-colors ease-in duration-50"
+      to={target}
+    >
+      <div className="group relative flex items-center gap-3 py-4 px-5 sm:px-6">
+        <div className="w-12 h-12 rounded-full overflow-hidden">
+          <img
+            className="w-full h-full object-cover"
+            alt={image.alt}
+            src={image.src}
+          />
+        </div>
+        <div className="w-[calc(100%-3rem)] flex gap-4 sm:pr-8 md:pr-6 lg:pr-10">
+          <div className="w-full sm:w-1/4 md:w-[30%] lg:w-1/4">
+            <div className="font-plex flex flex-col justify-between">
+              <span className="text-sm leading-5 font-medium text-grey-900 line-clamp-1 group-hover:text-white transition-colors ease-in duration-50">
+                {name}
+              </span>
+              <span className="text-xs leading-4 font-normal text-grey-500 break-all line-clamp-1">
+                {tag}
+              </span>
+              <span className="flex items-center text-xs leading-4 font-normal text-grey-500">
+                <UserMultiple className="mr-2" /> {members}
+              </span>
+            </div>
+          </div>
+          <div className="hidden sm:block w-[75%]">
+            <p className="font-plex text-sm leading-5 font-normal text-black line-clamp-3 group-hover:text-white transition-colors ease-in duration-50">
+              {description}
+            </p>
+          </div>
+        </div>
+        <ChevronRight
+          size={24}
+          className="absolute top-1/2 right-4 lg:right-6 -translate-y-2/4 text-grey-500"
+        />
+      </div>
+    </Link>
+  );
+};
+
+export const Space: React.FC<RoomProps> = ({
+  target,
+  name,
+  description,
+  image,
+  members,
+  tag,
+}) => {
+  return (
+    <Link
+      className="block px-1 sm:px-0 bg-grey-200 hover:bg-grey-900 border border-transparent focus:border-grey-900 transition-colors ease-in duration-50"
+      to={target}
+    >
+      <div className="group relative flex gap-3 py-4 px-5 sm:px-6">
+        <div className="w-12 h-12 rounded-full overflow-hidden">
+          <img
+            className="w-full h-full object-cover"
+            alt={image.alt}
+            src={image.src}
+          />
+        </div>
+        <div className="w-[calc(100%-3rem)] flex flex-col sm:pr-8 md:pr-6 lg:pr-10">
+          <div className="w-full">
+            <div className="font-plex flex flex-col justify-between">
+              <span className="text-lg leading-5 font-medium text-grey-900 line-clamp-1 group-hover:text-white transition-colors ease-in duration-50">
+                {name}
+              </span>
+              <span className="text-xs leading-4 font-normal text-grey-500 line-clamp-1">
+                {tag}
+              </span>
+              <span className="flex items-center text-xs leading-4 font-normal text-grey-500">
+                <UserMultiple className="mr-2" /> {members}
+              </span>
+            </div>
+          </div>
+          <div className="hidden sm:block w-full mt-3">
+            <p className="font-plex text-sm leading-5 font-normal text-black line-clamp-3 group-hover:text-white transition-colors ease-in duration-50">
+              {description}
+            </p>
+          </div>
+        </div>
+        <ChevronRight
+          size={24}
+          className="absolute top-1/2 right-4 lg:right-6 -translate-y-2/4 text-grey-500"
+        />
+      </div>
+    </Link>
+  );
+};

src/stories/molecules/RoomItem.stories.tsx

+import * as React from "react";
+import { Room } from "@components/ElementList";
+
+const ROOM_DATA = {
+  target: "/",
+  name: "[FCHH] Welcome!",
+  tag: "#welcome:fabcity.hamburg",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+  image: {
+    src: "https://picsum.photos/id/1005/200/300",
+    alt: "something",
+  },
+  members: 123,
+};
+
+export const RoomItemStory = () => (
+  <div className="container">
+    <div className="w-full lg:w-2/3">
+      <Room
+        target={ROOM_DATA.target}
+        name={ROOM_DATA.name}
+        tag={ROOM_DATA.tag}
+        description={ROOM_DATA.description}
+        image={ROOM_DATA.image}
+        members={ROOM_DATA.members}
+      />
+    </div>
+  </div>
+);
+
+export default {
+  title: "Molecules",
+};
+
+RoomItemStory.storyName = "Room";

src/stories/molecules/RoomList.stories.tsx

+import * as React from "react";
+import { RoomList, Room } from "@components/ElementList";
+
+const ROOMS = [
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#welcome:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1005/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#interfacer:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1006/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#verein:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1075/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+];
+
+export const RoomListStory = () => (
+  <div className="container">
+    <div className="w-full lg:w-2/3 py-3">
+      <RoomList title="Entdecke unsere Element Rooms:">
+        {ROOMS.map((room) => (
+          <Room
+            key={room.tag}
+            target={room.target}
+            name={room.name}
+            tag={room.tag}
+            description={room.description}
+            image={room.image}
+            members={room.members}
+          />
+        ))}
+      </RoomList>
+    </div>
+  </div>
+);
+
+export default {
+  title: "Molecules",
+};
+
+RoomListStory.storyName = "Room List";

src/stories/molecules/RoomSpace.stories.tsx

+import * as React from "react";
+import { RoomSpace, Room } from "@components/ElementList";
+
+const ROOMS = [
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#welcome:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1005/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#interfacer:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1006/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+  {
+    target: "/",
+    name: "[FCHH] Welcome!",
+    tag: "#verein:fabcity.hamburg",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+    image: {
+      src: "https://picsum.photos/id/1075/200/300",
+      alt: "something",
+    },
+    members: 123,
+  },
+];
+
+const SPACE = {
+  target: "/",
+  name: "[FCHH] Welcome!",
+  tag: "#welcome:fabcity.hamburg",
+  description:
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac  dante quis nisi porta lobortis vel ac ex. Nulla semper massa eros, vitae interdum dolor elementum eget. Proin dignissim volutpat diam. Donec sed nisi diam. Integer id dui at ligula lobortis viverra. Sed volutpat neque hendrerit accumsan efficitur. Pellentesque blandit, odio sed cursus bibendum, quam lacus fringilla lorem, nec maximus sapien mi non sapien.",
+  image: {
+    src: "https://picsum.photos/id/1009/200/300",
+    alt: "something",
+  },
+  members: 123,
+  rooms: ROOMS,
+};
+
+export const RoomSpaceStory = () => (
+  <div className="container">
+    <div className="w-full lg:w-2/3 py-3">
+      <RoomSpace
+        title="Entdecke unseren Space:"
+        target={SPACE.target}
+        name={SPACE.name}
+        tag={SPACE.tag}
+        description={SPACE.description}
+        image={SPACE.image}
+        members={SPACE.members}
+      >
+        {SPACE.rooms.map((room) => (
+          <Room
+            key={room.tag}
+            target={room.target}
+            name={room.name}
+            tag={room.tag}
+            description={room.description}
+            image={room.image}
+            members={room.members}
+          />
+        ))}
+      </RoomSpace>
+    </div>
+  </div>
+);
+
+export default {
+  title: "Molecules",
+};
+
+RoomSpaceStory.storyName = "Room Space";