Add inviting client tile

src/components/InvitingClientTile.stories.tsx

+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import ClientTile from './InvitingClientTile';
+
+export default { title: 'ClientTile' };
+
+export const Element = <ClientTile clientName={'element.io'} />;

src/components/InvitingClientTile.tsx

+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Tile from './Tile';
+
+import { clientMap } from '../clients';
+import './MatrixTile.scss';
+
+interface IProps {
+    clientName: string;
+}
+
+const InvitingClientTile: React.FC<IProps> = ({ clientName }: IProps) => {
+    const client = clientMap[clientName];
+
+    if (!client) {
+        return (
+            <Tile className="matrixTile">
+                {/* TODO: add gh link */}
+                <p>
+                    The client that created this link "{clientName}" is not a
+                    recognised client. If this is a mistake and you'd like a
+                    nice advertisement for it here please{' '}
+                    <a href="https://github.com/matrix-org/matrix.to">
+                        open a pr
+                    </a>
+                    .
+                </p>
+            </Tile>
+        );
+    }
+
+    return (
+        <Tile className="matrixTile">
+            <img src={client.logo} alt={client.name} />
+            <h2>
+                Invite created with <a href={client.homepage}>{client.name}</a>
+            </h2>
+            <div>{client.description}</div>
+        </Tile>
+    );
+};
+
+export default InvitingClientTile;

src/pages/LinkRouter.tsx

@@ -18,6 +18,7 @@ import React from 'react';
 
 import Tile from '../components/Tile';
 import LinkPreview from '../components/LinkPreview';
+import InvitingClientTile from '../components/InvitingClientTile';
 import { parseHash } from '../parser/parser';
 import { LinkKind } from '../parser/types';
 
@@ -28,9 +29,9 @@ interface IProps {
 const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
     // our room id's will be stored in the hash
     const parsedLink = parseHash(link);
-    console.log({ link });
 
     let feedback: JSX.Element;
+    let client: JSX.Element = <></>;
     switch (parsedLink.kind) {
         case LinkKind.ParseFailed:
             feedback = (
@@ -41,7 +42,21 @@ const LinkRouter: React.FC<IProps> = ({ link }: IProps) => {
             );
             break;
         default:
-            feedback = <LinkPreview link={parsedLink} />;
+            if (parsedLink.arguments.client) {
+                client = (
+                    <InvitingClientTile
+                        clientName={parsedLink.arguments.client}
+                    />
+                );
+            }
+
+            feedback = (
+                <>
+                    <LinkPreview link={parsedLink} />
+                    <hr />
+                    {client}
+                </>
+            );
     }
 
     return feedback;