From e7563b4035c9d5c63c8d5d4fec349750426e6f8c Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Wed, 6 Apr 2022 21:56:00 +0300
Subject: [PATCH] seperate component

---
 src/containers/Incompatible/index.tsx | 46 +++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/containers/Incompatible/index.tsx

diff --git a/src/containers/Incompatible/index.tsx b/src/containers/Incompatible/index.tsx
new file mode 100644
index 0000000..c097d9b
--- /dev/null
+++ b/src/containers/Incompatible/index.tsx
@@ -0,0 +1,46 @@
+import { useRouter } from "next/router";
+import React from "react";
+import { Button } from "src/components/Button";
+import styled from "styled-components";
+
+export const StyledIncompatible = styled.div`
+  display: none;
+
+  @media only screen and (max-width: 568px) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    background: ${({ theme }) => theme.BLACK_LIGHT};
+    color: ${({ theme }) => theme.SILVER};
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+
+    button {
+      margin-top: 60px;
+    }
+
+    &::before {
+      content: "Uh, oh!";
+      font-weight: 700;
+      font-size: 60px;
+      opacity: 0.6;
+    }
+  }
+`;
+
+export const Incompatible: React.FC = () => {
+  const route = useRouter();
+
+  return (
+    <StyledIncompatible>
+      This app is not compatible with your device!
+      <Button className="incompatible" onClick={() => route.push("/")}>
+        Go Back
+      </Button>
+    </StyledIncompatible>
+  );
+};