diff --git a/public/index.html b/public/index.html index aa069f2..dce5c75 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,34 @@ - - - - - - - - - - + + + + + + + + + + + + + - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 31cef7f..b4e0e39 100644 --- 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
Hello World
; + return ( +<> + {/* */} + + + + ); } export default App; diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx new file mode 100644 index 0000000..38250a2 --- /dev/null +++ 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; */ +} + + +` \ No newline at end of file diff --git a/src/components/tsxCSS/StyleUseNumber.tsx b/src/components/tsxCSS/StyleUseNumber.tsx new file mode 100644 index 0000000..4cc1eef --- /dev/null +++ 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 new file mode 100644 index 0000000..f4f87ab --- /dev/null +++ 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 ( + + + + + + ) + +} diff --git a/src/components/tsxHTML_JS/Uses_number.tsx b/src/components/tsxHTML_JS/Uses_number.tsx new file mode 100644 index 0000000..f677f57 --- /dev/null +++ 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 ( + + +
+
+

Queries processed

+
+

+ {props.queryProcess} + +

+

Most visited - google.com, discord.com

+

View all + +

+
+
+
+ + + ) +} + +