Merge pull request #324 from opeolluwa/master

revamp the supported devices to include web

desktop/src/pages/connection/browser.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Heading from "@/components/Heading";
+import Text from "@/components/Text";
+import View from "@/components/View";
+import PageLayout from "@/components/layout/PageLayout";
+import { SystemInformationContext } from "@/store/sys-info";
+import { useContext } from "react";
+import { writeText } from "@tauri-apps/api/clipboard";
+import { message } from "@tauri-apps/api/dialog";
+
+export default function ConnectionPage() {
+  const { serverBaseUrl } = useContext(SystemInformationContext);
+
+  const copyToClipboard = async () => {
+    writeText(serverBaseUrl.toString())
+      .then(async () => {
+        message("Text Copied", { title: "Tauri", type: "info" });
+      })
+      .then(() => {
+        console.log("here goes nothing");
+      });
+  };
+  return (
+    <>
+      <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
+        <View
+          className=" text-center flex flex-col justify-center items-center"
+          style={{ height: "500px" }}
+        >
+          <View>
+            <Heading className="mt-8 text-3xl text-gray-700">
+              Connect Device
+            </Heading>
+            <Text className="mb-8 leading-5">
+              Visit this address in your browser
+            </Text>
+
+            <View className="flex items-center justify-center">
+              <span className="text-2xl" onClick={copyToClipboard}>
+                {serverBaseUrl + "/upload"}
+              </span>
+              <i className="ri-file-copy-line text-4xl ml-3 cursor-pointer hover:text-app"></i>
+            </View>
+          </View>
+        </View>
+      </PageLayout>
+    </>
+  );
+}

desktop/src/pages/connection/index.tsx

@@ -5,6 +5,7 @@ import View from "@/components/View";
 import PageLayout from "@/components/layout/PageLayout";
 import { Text } from "@filesync/components";
 import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
 
 export default function ConnectionPage() {
   return (
@@ -18,20 +19,20 @@ export default function ConnectionPage() {
             <Text>some lorem text blablabla</Text>
 
             <View className="flex justify-between items-center mt-8">
-              <a
+              <Link
                 href="/connection/hotspot"
                 className="flex flex-col items-center "
               >
                 <ArrowUpIcon className=" bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-4 rounded-xl shadow hover:shadow-none cursor-pointer"></ArrowUpIcon>
                 <Text className="mt-2">Send File</Text>
-              </a>
-              <a
+              </Link>
+              <Link
                 href="/connection/peer"
                 className="flex flex-col items-center "
               >
                 <ArrowDownIcon className="bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200 p-4 rounded-xl shadow hover:shadow-none cursor-pointer w-[70px] h-[70px]"></ArrowDownIcon>
                 <Text className="mt-2">Recieve File</Text>
-              </a>
+              </Link>
             </View>
           </View>
         </View>

desktop/src/pages/connection/peer.tsx

@@ -5,40 +5,43 @@ import Text from "@/components/Text";
 import View from "@/components/View";
 import PageLayout from "@/components/layout/PageLayout";
 import { LinuxOutlined } from "@ant-design/icons";
+import Link from "next/link";
 
 export default function ConnectionPage() {
   return (
     <>
       <PageLayout pageTitle={"Connect Device"} includeSearchBar={false}>
         <View className=" text-center flex flex-col justify-center items-center h-[500px]">
           <View>
-            <Heading className=" text-gray-700 text-2xl">
-              Select Device
-            </Heading>
+            <Heading className=" text-gray-700 text-2xl">Select Device</Heading>
             <Text className="mb-8 mt-1  leading-1">
               Select device type to begin
             </Text>
           </View>
 
           <View className="flex items-center gap-6 justify-center text-4xl font-thin">
-            <a
+            <Link
               href="/connection/desktop"
               className="  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 box-border rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
             >
               <LinuxOutlined />
-            </a>
-            <a
+            </Link>
+            <Link
               href="/connection/mobile"
               className="ri-android-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  box-border p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
-            ></a>
-            <a
+            ></Link>
+            <Link
               href="/connection/desktop"
               className="ri-windows-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
-            ></a>
-            <a
+            ></Link>
+            <Link
               href="/connection/desktop"
               className="ri-apple-fill  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
-            ></a>
+            ></Link>
+            <Link
+              href="/connection/browser"
+              className="ri-global-line  bg-gray-200 hover:bg-app-50 hover:text-app transition-all duration-200  p-8 rounded-full shadow hover:shadow-none cursor-pointer w-[70px] h-[70px] flex justify-center items-center"
+            ></Link>
           </View>
         </View>
       </PageLayout>