From 1cece53b8f5c7dd977dcc8473863f31be171df5f Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Sun, 9 Jan 2022 17:04:24 +0000 Subject: [PATCH 1/7] create components for dispaying uses in numbers 1st task completed --- public/index.html | 56 +++++++++++++++--------- src/App.tsx | 8 +++- src/components/StyleUseNumber.tsx | 71 +++++++++++++++++++++++++++++++ src/components/Uses_number.tsx | 30 +++++++++++++ 4 files changed, 143 insertions(+), 22 deletions(-) create mode 100644 src/components/StyleUseNumber.tsx create mode 100644 src/components/Uses_number.tsx diff --git a/public/index.html b/public/index.html index aa069f2..50289c8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,33 @@ - - - - - - - - - - + + + + + + + + + + + + - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 31cef7f..7201862 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,14 @@ import React from "react"; import "./App.css"; +import Uses_numbers from "./components/Uses_number" +// import Uses_numbers from "./components/Uses_number" function App() { - return
Hello World
; + return ( + + + + ); } export default App; diff --git a/src/components/StyleUseNumber.tsx b/src/components/StyleUseNumber.tsx new file mode 100644 index 0000000..ba27484 --- /dev/null +++ b/src/components/StyleUseNumber.tsx @@ -0,0 +1,71 @@ +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: 250px; +} + +.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/Uses_number.tsx b/src/components/Uses_number.tsx new file mode 100644 index 0000000..64ccf93 --- /dev/null +++ b/src/components/Uses_number.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import { StyleUserNumber } from "./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 + +

+
+
+
+ + + ) +} + + From 85c99faf04977968f4ee31634a4a6e88257e9959 Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 26 Jan 2022 08:54:52 +0000 Subject: [PATCH 2/7] ITEM COMPONENTS (HOME,FILTER) --- public/index.html | 1 + src/App.tsx | 9 ++-- src/components/tsxCSS/StyleItemComponents.tsx | 54 +++++++++++++++++++ .../{ => tsxCSS}/StyleUseNumber.tsx | 10 +++- src/components/tsxHTML_JS/ItemComponents.tsx | 22 ++++++++ .../{ => tsxHTML_JS}/Uses_number.tsx | 5 +- 6 files changed, 95 insertions(+), 6 deletions(-) create mode 100644 src/components/tsxCSS/StyleItemComponents.tsx rename src/components/{ => tsxCSS}/StyleUseNumber.tsx (90%) create mode 100644 src/components/tsxHTML_JS/ItemComponents.tsx rename src/components/{ => tsxHTML_JS}/Uses_number.tsx (91%) diff --git a/public/index.html b/public/index.html index 50289c8..dce5c75 100644 --- a/public/index.html +++ b/public/index.html @@ -23,6 +23,7 @@ + diff --git a/src/App.tsx b/src/App.tsx index 7201862..8b06818 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,15 @@ import React from "react"; import "./App.css"; -import Uses_numbers from "./components/Uses_number" +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 ( - - +<> + {/* */} + + ); } diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx new file mode 100644 index 0000000..bcb3316 --- /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/StyleUseNumber.tsx b/src/components/tsxCSS/StyleUseNumber.tsx similarity index 90% rename from src/components/StyleUseNumber.tsx rename to src/components/tsxCSS/StyleUseNumber.tsx index ba27484..5f54f00 100644 --- a/src/components/StyleUseNumber.tsx +++ b/src/components/tsxCSS/StyleUseNumber.tsx @@ -1,3 +1,7 @@ +// 1 +// css +// css for '145' number on dashboard + import styled from "styled-components" export const StyleUserNumber = styled.div` @@ -7,13 +11,15 @@ export const StyleUserNumber = styled.div` list-style: none; text-decoration: none; + + .content{ font-size: 30px; - margin-left: 250px; + margin-left: 20px; } .ctitle{ - padding-top: 13%; + /* padding-top: 13%; */ padding-left: 1%; margin-bottom: 2%; } 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/Uses_number.tsx b/src/components/tsxHTML_JS/Uses_number.tsx similarity index 91% rename from src/components/Uses_number.tsx rename to src/components/tsxHTML_JS/Uses_number.tsx index 64ccf93..f677f57 100644 --- a/src/components/Uses_number.tsx +++ b/src/components/tsxHTML_JS/Uses_number.tsx @@ -1,5 +1,8 @@ +// 1 +// 145 number on dashboard + import React from "react"; -import { StyleUserNumber } from "./StyleUseNumber"; +import { StyleUserNumber } from "../tsxCSS/StyleUseNumber"; export default function Uses_number(props: { queryProcess: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; }) { From 7850c8c9bc9f9c10b8e23bcbb5eef20717923dcb Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 26 Jan 2022 09:02:23 +0000 Subject: [PATCH 3/7] semicolen added --- src/App.tsx | 6 +++--- src/components/tsxCSS/StyleItemComponents.tsx | 2 +- src/components/tsxCSS/StyleUseNumber.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 8b06818..6772aeb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ 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" +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 ( diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx index bcb3316..6419db3 100644 --- a/src/components/tsxCSS/StyleItemComponents.tsx +++ b/src/components/tsxCSS/StyleItemComponents.tsx @@ -1,5 +1,5 @@ import react from "react"; -import styled from "styled-components" +import styled from "styled-components"; export const StyleItemComponents = styled.div` diff --git a/src/components/tsxCSS/StyleUseNumber.tsx b/src/components/tsxCSS/StyleUseNumber.tsx index 5f54f00..4cc1eef 100644 --- a/src/components/tsxCSS/StyleUseNumber.tsx +++ b/src/components/tsxCSS/StyleUseNumber.tsx @@ -2,7 +2,7 @@ // css // css for '145' number on dashboard -import styled from "styled-components" +import styled from "styled-components"; export const StyleUserNumber = styled.div` font-family: 'Varela Round', sans-serif; From 989d94ad7987d21654011877dfcacc34e77cda24 Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 26 Jan 2022 09:05:17 +0000 Subject: [PATCH 4/7] solve error --- src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6772aeb..b4e0e39 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ -import React from "react"; +// import React from "react"; import "./App.css"; -import Uses_numbers from "./components/tsxHTML_JS/Uses_number"; +// import Uses_numbers from "./components/tsxHTML_JS/Uses_number"; import ItemComponents from "./components/tsxHTML_JS/ItemComponents"; // import Uses_numbers from "./components/Uses_number"; From 639e76f78d4eb163824fcd65637c54bea4bb40c4 Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 26 Jan 2022 09:06:49 +0000 Subject: [PATCH 5/7] solve error --- src/components/tsxCSS/StyleItemComponents.tsx | 2 +- src/components/tsxHTML_JS/ItemComponents.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx index 6419db3..d3904e7 100644 --- a/src/components/tsxCSS/StyleItemComponents.tsx +++ b/src/components/tsxCSS/StyleItemComponents.tsx @@ -1,4 +1,4 @@ -import react from "react"; + import styled from "styled-components"; diff --git a/src/components/tsxHTML_JS/ItemComponents.tsx b/src/components/tsxHTML_JS/ItemComponents.tsx index f4f87ab..68c0625 100644 --- a/src/components/tsxHTML_JS/ItemComponents.tsx +++ b/src/components/tsxHTML_JS/ItemComponents.tsx @@ -1,7 +1,7 @@ // 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 ( From 7eb063e629b10aa8fa21af5ac852a5a54e7a6c5d Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 26 Jan 2022 09:08:08 +0000 Subject: [PATCH 6/7] commit From a92d5b8e3d71274fee7b688da1c2816e369bf51c Mon Sep 17 00:00:00 2001 From: shashank lalit patil Date: Wed, 2 Feb 2022 14:12:07 +0000 Subject: [PATCH 7/7] 1 --- src/components/tsxCSS/StyleItemComponents.tsx | 2 +- src/components/tsxHTML_JS/ItemComponents.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tsxCSS/StyleItemComponents.tsx b/src/components/tsxCSS/StyleItemComponents.tsx index d3904e7..38250a2 100644 --- a/src/components/tsxCSS/StyleItemComponents.tsx +++ b/src/components/tsxCSS/StyleItemComponents.tsx @@ -1,4 +1,4 @@ - +import React from "react"; import styled from "styled-components"; diff --git a/src/components/tsxHTML_JS/ItemComponents.tsx b/src/components/tsxHTML_JS/ItemComponents.tsx index 68c0625..f4f87ab 100644 --- a/src/components/tsxHTML_JS/ItemComponents.tsx +++ b/src/components/tsxHTML_JS/ItemComponents.tsx @@ -1,7 +1,7 @@ // 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 (