NetBlockGit · shashankpatil125 · Jan 9, 2022 · Jan 26, 2022 · Jan 26, 2022 · Jan 26, 2022
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+
+  <!-- google fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
+  <!-- google fonts -->
+
+  <!-- iconify -->
+  <script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
+  <script src="https://code.iconify.design/2/2.1.1/iconify.min.js"></script>
+  <!-- iconify -->
+
+
+
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +37,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +53,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,17 @@
-import React from "react";
+// import React from "react";
 import "./App.css";
+// import Uses_numbers from "./components/tsxHTML_JS/Uses_number";
+import ItemComponents from "./components/tsxHTML_JS/ItemComponents";
+// import Uses_numbers from "./components/Uses_number";
 
 function App() {
-  return <div>Hello World</div>;
+  return (
+<>
+    {/* <Uses_numbers queryProcess='145'/> */}
+    <ItemComponents dataIcon="fluent:home-28-filled" mode='Home'/>
+    </>  
+
+  );
 }
 
 export default App;
diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+
+export const StyleItemComponents = styled.div`
+    font-family: 'Varela Round', sans-serif;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+    /* background-color: #1f1f68; */
+
+
+/* .modecontainer{
+background-color: transparent;
+padding: 7px;
+
+} */
+.home{
+    color: #d8d1d1;
+    font-size: 25px;
+    width: 230px;
+    background: transparent;
+    border-radius: 10px;
+    border: none;
+    /* padding: 10%; */
+}
+
+.home:hover{
+    background-color: white;
+    color: black;
+    transition:1s;
+}
+
+.hicon{
+    position: absolute;
+    top: 9px;
+    left:40px;
+    padding:0px 0px 0px 0px;
+    padding-right: 10px;
+
+}
+
+.pad{
+    /* position: absolute;
+    top: 22px;
+    left:88px; */
+    padding-bottom: 3px;
+    padding: 0px 35px 0px 0px;
+    /* text-align: center; */
+}
+
+
+`
diff --git a/src/components/tsxCSS/StyleUseNumber.tsx b/src/components/tsxCSS/StyleUseNumber.tsx
@@ -0,0 +1,77 @@
+// 1
+// css
+// css for '145' number on dashboard
+
+import styled from "styled-components";
+
+export const StyleUserNumber = styled.div`
+    font-family: 'Varela Round', sans-serif;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+
+
+
+.content{
+    font-size: 30px;
+    margin-left: 20px;
+}
+
+.ctitle{
+    /* padding-top: 13%; */
+    padding-left: 1%;
+    margin-bottom: 2%;
+}
+
+.no{
+    font-size:55px ;
+    /* padding: 4% 6% 0% 6%; */
+
+    margin-top: 0%;
+    margin-bottom: 0%;
+}
+.nobox{
+    padding: 4% 6% 0% 6%;
+    margin-top: 0%;
+    margin-bottom: 0%;
+}
+.mostv{
+    font-size:17px;
+    padding-left:6%;
+    color: gray;
+    margin-bottom: 2%;
+}
+
+.viewa{
+    font-size: 25px;
+    color: rgb(14, 14, 190);
+    margin-top:0%;
+    padding-left: 8%;
+    padding-bottom: 3%;
+}
+
+.box{
+    /* border:  solid black; */
+    box-shadow: 3px 4px 10px gray;
+    margin-left: 1.5%;
+    border-radius: 15px; 
+
+}
+
+.pad{
+    width: 440px;
+}
+
+.pos{
+    align-items: center;
+    padding: 10px 5px 10px 240px;
+}
+
+.next{
+    color:#0e0ebe;
+    padding:0px 0px 0px 0px;
+    margin: 0px 0px -4px 2px;
+}
+
+`
diff --git a/src/components/tsxHTML_JS/ItemComponents.tsx b/src/components/tsxHTML_JS/ItemComponents.tsx
@@ -0,0 +1,22 @@
+// 2
+// home and filter item component on dashboard 
+
+import React from "react";
+import { StyleItemComponents } from "../tsxCSS/StyleItemComponents";
+export default function homeIcon(props: {  mode: string , dataIcon:string }) {
+    return (
+        <StyleItemComponents>
+
+            <button className="home">
+                <div>
+                <span className="iconify hicon" data-icon={props.dataIcon}></span> 
+                <span className="pad">
+                    {props.mode}
+                </span>
+                </div>
+            </button>
+
+        </StyleItemComponents>
+    )
+
+}
diff --git a/src/components/tsxHTML_JS/Uses_number.tsx b/src/components/tsxHTML_JS/Uses_number.tsx
@@ -0,0 +1,33 @@
+// 1
+// 145 number on dashboard
+
+import React from "react";
+import { StyleUserNumber } from "../tsxCSS/StyleUseNumber";
+
+
+export default function Uses_number(props: { queryProcess: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; }) {
+
+    return (
+        <StyleUserNumber>
+
+            <div className="content">
+                <div className="pad">
+                    <p className="ctitle">Queries processed</p>
+                    <div className="box">
+                        <p className="nobox">
+                            <span className="no">{props.queryProcess}</span>
+                            <span className="iconify pos" data-icon="akar-icons:download"></span>
+                        </p>
+                        <p className="mostv">Most visited - google.com, discord.com</p>
+                        <p className="viewa">View all
+                        <span className="iconify next" data-icon="ic:round-navigate-next"></span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </StyleUserNumber>
+
+    )
+}
+
+