Commit a2bef5ab authored by Moritz Stückler's avatar Moritz Stückler 🤠
Browse files

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

feature: room and space list

Closes #13

See merge request software/fabcity-interfacer-ui!15
parents 7c03a83d f53c8315
Pipeline #2392 passed with stages
in 41 seconds
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>
);
};
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";
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";
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";
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment