Home page styling

src/CallTile.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { CopyButton } from "./button";
+import { Facepile } from "./Facepile";
+import { Avatar } from "./Avatar";
+import { ReactComponent as VideoIcon } from "./icons/Video.svg";
+import styles from "./CallTile.module.css";
+
+export function CallTile({ name, avatarUrl, roomUrl, participants }) {
+  return (
+    <Link to={roomUrl} className={styles.callTile}>
+      <Avatar
+        size="md"
+        bgKey={name}
+        src={avatarUrl}
+        fallback={<VideoIcon width={16} height={16} />}
+        className={styles.avatar}
+      />
+      <div className={styles.callInfo}>
+        <h5>{name}</h5>
+        <p>{roomUrl}</p>
+        {participants && <Facepile participants={participants} />}
+      </div>
+      <CopyButton
+        className={styles.copyButton}
+        variant="icon"
+        value={roomUrl}
+      />
+    </Link>
+  );
+}