Invitation Card UI (#186)

UI/invite-card.test.tsx

@@ -0,0 +1,14 @@
+/** @jsx h */
+import { h, render } from "https://esm.sh/preact@10.17.1";
+import { InviteCard } from "./invite-card.tsx";
+
+render(
+    <InviteCard
+        name="test group test group test group test group test group test group"
+        description="this is a test group this is a test group this is a test group this is a test group"
+        onJoin={() => {
+            console.log("join");
+        }}
+    />,
+    document.body,
+);

UI/invite-card.tsx

@@ -0,0 +1,45 @@
+/** @jsx h */
+import { h } from "https://esm.sh/preact@10.17.1";
+import { tw } from "https://esm.sh/twind@0.16.16";
+import { PrimaryTextColor, SecondaryBackgroundColor, SecondaryTextColor } from "./style/colors.ts";
+import { Avatar } from "./components/avatar.tsx";
+import { LinearGradientsClass, NoOutlineClass } from "./components/tw.ts";
+
+export function InviteCard(props: {
+    picture?: string;
+    name: string;
+    description: string;
+    onJoin: () => void;
+}) {
+    const { picture, name, description, onJoin } = props;
+
+    const styles = {
+        container: tw`bg-[${SecondaryBackgroundColor}] rounded-sm p-2 max-w-sm my-1`,
+        title: tw`text-[${SecondaryTextColor}] font-bold text-xs uppercase`,
+        profile: {
+            container: tw`flex py-2 gap-x-4`,
+            picture: tw`w-10 h-10`,
+            text: {
+                container: tw`flex-1 overflow-hidden`,
+                name: tw`text-[${PrimaryTextColor}] truncate`,
+                description: tw`text-[${SecondaryTextColor}] text-xs truncate`,
+            },
+        },
+        button:
+            tw`px-4 py-2 rounded-sm ${LinearGradientsClass} hover:bg-gradient-to-l text-[${PrimaryTextColor}] text-sm ${NoOutlineClass} font-bold`,
+    };
+
+    return (
+        <div class={styles.container}>
+            <p class={styles.title}>Please join me on group chat</p>
+            <div class={styles.profile.container}>
+                <Avatar picture={picture} class={styles.profile.picture} />
+                <div class={styles.profile.text.container}>
+                    <h3 class={styles.profile.text.name}>{name}</h3>
+                    <p class={styles.profile.text.description}>{description}</p>
+                </div>
+                <button class={styles.button} onClick={onJoin}>Join</button>
+            </div>
+        </div>
+    );
+}

UI/note-card.tsx

@@ -17,7 +17,7 @@ export function NoteCard(props: {
     const { profileData, event, emit } = props;
     const styles = {
         container:
-            tw`px-4 my-1 py-2 border-2 text-[${PrimaryTextColor}] border-[${PrimaryTextColor}4D] rounded-lg py-1 flex cursor-pointer bg-[#36393F] hover:bg-[${HoverButtonBackgroudColor}]`,
+            tw`px-4 my-1 py-2 border-2 text-[${PrimaryTextColor}] border-[${PrimaryTextColor}4D] rounded-lg py-1 flex cursor-pointer bg-[#36393F] hover:bg-[${HoverButtonBackgroudColor}] max-w-sm`,
         avatar: tw`w-10 h-10`,
         information: {
             container: tw`ml-2 flex-1 overflow-hidden`,

UI/profile-card.tsx

@@ -18,7 +18,7 @@ export function ProfileCard(props: {
     const { profileData, publicKey, emit } = props;
     const styles = {
         container:
-            tw`px-4 py-2 my-1 text-[${PrimaryTextColor}] border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer py-1 bg-[#36393F]`,
+            tw`px-4 py-2 my-1 text-[${PrimaryTextColor}] border-2 border-[${PrimaryTextColor}4D] rounded-lg hover:bg-[${HoverButtonBackgroudColor}] cursor-pointer py-1 bg-[#36393F] max-w-sm`,
         profile: {
             container: tw`flex`,
             avatar: tw`w-10 h-10`,