From 96ecf7280f24ece85a19abdac2d38994248c8e1d Mon Sep 17 00:00:00 2001 From: lakshya Date: Thu, 29 Feb 2024 17:57:21 +0530 Subject: [PATCH] add components page Signed-off-by: lakshya --- .../projects/sistent/components/button.js | 8 + .../{components.js => components/index.js} | 2 +- .../projects/sistent/components/text-input.js | 8 + src/sections/Products/products.style.js | 111 +++++------ src/sections/Projects/Sistent/components.js | 32 --- .../Projects/Sistent/components/button.js | 7 + .../Projects/Sistent/components/index.js | 87 +++++++++ .../Projects/Sistent/components/text-input.js | 7 + .../Projects/Sistent/sistent.style.js | 184 ++++++++++++++++++ 9 files changed, 358 insertions(+), 88 deletions(-) create mode 100644 src/pages/projects/sistent/components/button.js rename src/pages/projects/sistent/{components.js => components/index.js} (63%) create mode 100644 src/pages/projects/sistent/components/text-input.js delete mode 100644 src/sections/Projects/Sistent/components.js create mode 100644 src/sections/Projects/Sistent/components/button.js create mode 100644 src/sections/Projects/Sistent/components/index.js create mode 100644 src/sections/Projects/Sistent/components/text-input.js diff --git a/src/pages/projects/sistent/components/button.js b/src/pages/projects/sistent/components/button.js new file mode 100644 index 000000000000..c4aea26d1621 --- /dev/null +++ b/src/pages/projects/sistent/components/button.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentButton from "../../../../sections/Projects/Sistent/components/button"; + +const SistentButtonPage = () => { + return ; +}; + +export default SistentButtonPage; diff --git a/src/pages/projects/sistent/components.js b/src/pages/projects/sistent/components/index.js similarity index 63% rename from src/pages/projects/sistent/components.js rename to src/pages/projects/sistent/components/index.js index 3b4aed86f480..0cd9f7e7d28d 100644 --- a/src/pages/projects/sistent/components.js +++ b/src/pages/projects/sistent/components/index.js @@ -1,5 +1,5 @@ import React from "react"; -import SistentComponents from "../../../sections/Projects/Sistent/components"; +import SistentComponents from "../../../../sections/Projects/Sistent/components"; const SistentComponentsPage = () => { return ; diff --git a/src/pages/projects/sistent/components/text-input.js b/src/pages/projects/sistent/components/text-input.js new file mode 100644 index 000000000000..0ee68df78700 --- /dev/null +++ b/src/pages/projects/sistent/components/text-input.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentTextInput from "../../../../sections/Projects/Sistent/components/text-input"; + +const SistentTextInputPage = () => { + return ; +}; + +export default SistentTextInputPage; diff --git a/src/sections/Products/products.style.js b/src/sections/Products/products.style.js index e018e0e4bdc9..60240ef662f1 100644 --- a/src/sections/Products/products.style.js +++ b/src/sections/Products/products.style.js @@ -5,7 +5,7 @@ const ProductWrapper = styled.section` width: 100vw; overflow: hidden; } - + .headers { display: flex; flex-direction: column; @@ -28,36 +28,36 @@ const ProductWrapper = styled.section` text-align: center; } } - + .paraInfo { width: 80vw; } - - .paras{ + + .paras { display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ } - - .comparison-button{ + + .comparison-button { margin-top: 75px; - padding: 0 1.5rem 2rem 1.5rem ; + padding: 0 1.5rem 2rem 1.5rem; Button { color: white; font-size: 1.75rem; font-weight: bold; } } - + .gap { padding: 5rem 20px; } - - .bot_gap{ - margin-bottom: 4rem; - } - + + .bot_gap { + margin-bottom: 4rem; + } + .freeTry { position: relative; display: flex; @@ -81,7 +81,7 @@ const ProductWrapper = styled.section` width: 860px; } } - + .rotate { transform: rotate(-4deg); width: 100vw; @@ -100,15 +100,19 @@ const ProductWrapper = styled.section` .product_hero { display: flex; - justify-content:center; - align-items : center; - background: linear-gradient(180deg, rgba(0, 211, 169, 0.10) 0%, rgba(0, 179, 159, 0.00) 100%); + justify-content: center; + align-items: center; + background: linear-gradient( + 180deg, + rgba(0, 211, 169, 0.1) 0%, + rgba(0, 179, 159, 0) 100% + ); } - + .product_hero_text { flex: 1; margin: 2rem; - margin-left:10vw; + margin-left: 10vw; } .product_hero_text h1 { font-family: Qanelas Soft; @@ -131,26 +135,25 @@ const ProductWrapper = styled.section` margin: 2rem 0; } .btn { - display: flex; - gap: 40px; - flex-direction: row; - } + display: flex; + gap: 40px; + flex-direction: row; + } .btn Button { font-size: 18px; } .product_hero_img { - margin:1rem; - > img { - width: 35rem; - height: 35rem; - position: relative; - - } + margin: 1rem; + > img { + width: 35rem; + height: 35rem; + position: relative; + } } .heroImg path { filter: red; } - + .product_cards { min-height: 100%; } @@ -162,16 +165,16 @@ const ProductWrapper = styled.section` } .product_cards .card { width: 540px; -height: 100%; + height: 100%; border-radius: 20px; background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0}; padding: 2rem; margin: 2rem; } -.logo { - max-height: 3rem; -} -.cards { + .logo { + max-height: 3rem; + } + .cards { display: flex; flex-wrap: wrap; justify-content: center; @@ -206,23 +209,23 @@ height: 100%; display: flex; align-items: flex-end; justify-content: space-between; - margin:0; + margin: 0; } -.learn { + .learn { font-size: 1rem; margin: 10px 0; cursor: pointer; color: ${(props) => props.theme.whiteToBlack}; - &:hover { - text-decoration: underline; - text-decoration-color: ${(props) => props.theme.secondaryColor}; - text-underline-offset: 8px; + &:hover { + text-decoration: underline; + text-decoration-color: ${(props) => props.theme.secondaryColor}; + text-underline-offset: 8px; } } .btns Button { margin: 20px 0px; font-size: 16px; - margin-bottom:0; + margin-bottom: 0; } .iconss { display: flex; @@ -230,16 +233,15 @@ height: 100%; position: absolute; right: 0; } - @media (max-width:1141px){ + @media (max-width: 1141px) { .product_hero_img { - margin:1rem; + margin: 1rem; } - .product_hero_img img{ - height:420px; + .product_hero_img img { + height: 420px; } } - - + @media (max-width: 968px) { .product_hero { display: flex; @@ -295,9 +297,9 @@ height: 100%; font-size: 40px; } } - @media (max-width: 600px){ - .product_cards .card{ - width:440px; + @media (max-width: 600px) { + .product_cards .card { + width: 440px; } } @media (max-width: 509px) { @@ -353,9 +355,8 @@ height: 100%; width: 100%; } .product_cards .card { - width:280px; + width: 280px; padding: 16px; - } .card_head { margin: 0; @@ -366,7 +367,7 @@ height: 100%; margin: 4px; font-size: 16px; } */ - .btns{ + .btns { scale: 0.8; } .card .text { diff --git a/src/sections/Projects/Sistent/components.js b/src/sections/Projects/Sistent/components.js deleted file mode 100644 index eb0a561b7bff..000000000000 --- a/src/sections/Projects/Sistent/components.js +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import { Container } from "../../../reusecore/Layout"; -import SistentWrapper from "./sistent.style"; -import TOC from "../../../components/SistentNavigation"; -import IntraPage from "../../../components/handbook-navigation/intra-page"; -import SistentPagination from "../../../components/SistentNavigation/pagination"; - -const contents = [{ id: 0, link: "#About", text: "Hey Yo" }]; - -const SistentComponents = () => { - return ( - -
-

Components

-
- -
- - - - - -
- - ); -}; - -export default SistentComponents; diff --git a/src/sections/Projects/Sistent/components/button.js b/src/sections/Projects/Sistent/components/button.js new file mode 100644 index 000000000000..6e77247e373f --- /dev/null +++ b/src/sections/Projects/Sistent/components/button.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SistentButton = () => { + return
SistentComponentsButton
; +}; + +export default SistentButton; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js new file mode 100644 index 000000000000..80dc1b3c364b --- /dev/null +++ b/src/sections/Projects/Sistent/components/index.js @@ -0,0 +1,87 @@ +import React, { useState } from "react"; +import { Container } from "../../../../reusecore/Layout"; +import SistentWrapper from "../sistent.style"; +import TOC from "../../../../components/SistentNavigation"; +import SistentPagination from "../../../../components/SistentNavigation/pagination"; +import SearchBox from "../../../../reusecore/Search"; +import useDataList from "../../../../utils/usedataList"; + +const componentsData = [ + { + id: 1, + name: "Button", + description: + "A button is an interactive element that triggers a specific action and also lets users know what will happen next.", + url: "/projects/sistent/components/button", + }, + { + id: 2, + name: "Text Input", + description: + "A text input is made up of multiple elements that combine to form a component that helps users to read, write, and edit text in an interface.", + url: "/projects/sistent/components/text-input", + }, +]; + +const SistentComponents = () => { + const [searchQuery, setSearchQuery] = useState(""); + const { queryResults, searchData } = useDataList( + componentsData, + setSearchQuery, + searchQuery, + ["name", "description"], + "id" + ); + + return ( + +
+

Components

+
+ +
+ +
+ +

Components

+ +

+ Components are reusable elements that serve as the building blocks + of the design system. They are curated using the established + identity principles and can be combined to form various elements, + patterns, and templates that can be used to design user + interfaces. +

+
+
+
+ +
+
+
+ {queryResults.map((comp) => ( +
+
+
{comp.name}
+
{comp.description}
+
+ +
+ ))} +
+
+
+ + +
+ + ); +}; + +export default SistentComponents; diff --git a/src/sections/Projects/Sistent/components/text-input.js b/src/sections/Projects/Sistent/components/text-input.js new file mode 100644 index 000000000000..10ea6f0dc6b2 --- /dev/null +++ b/src/sections/Projects/Sistent/components/text-input.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SistentTextInput = () => { + return
SistentTextInput
; +}; + +export default SistentTextInput; diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 4b3906593e36..f38acf50936a 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -606,6 +606,190 @@ const SistentWrapper = styled.div` margin-top: 0.5rem; margin-bottom: 0.5rem; } + + .components-container { + margin-left: 1rem; + } + + .search-container { + display: flex; + justify-content: center; + } + + .product_cards { + min-height: 100%; + margin: 2rem 0; + } + + .product_cards h2 { + text-align: center; + font-size: 56px; + font-style: normal; + font-weight: 700; + } + + .product_cards .card { + width: 400px; + display: flex; + flex-direction: column; + justify-content: space-between; + border-radius: 20px; + background-color: ${(props) => props.theme.grey212121ToGreyF0F0F0}; + padding: 2rem; + } + .logo { + max-height: 3rem; + } + .cards { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: space-evenly; + } + + .card_head { + display: flex; + flex-direction: column; + margin-bottom: 20px; + position: relative; + } + + .card_head .title { + font-size: 32px; + font-weight: 700; + } + + .card .text { + padding-top: 1rem; + padding-bottom: 2rem; + font-size: 16px; + font-style: normal; + font-weight: 400; + color: ${(props) => props.theme.whiteToBlack}; + } + + .card_bottom { + border-top: 2px solid #2c2c2c; + display: flex; + align-items: flex-end; + justify-content: space-between; + margin: 0; + } + + .learn { + font-size: 1rem; + margin: 10px 0; + cursor: pointer; + color: ${(props) => props.theme.whiteToBlack}; + &:hover { + text-decoration: underline; + text-decoration-color: ${(props) => props.theme.secondaryColor}; + text-underline-offset: 8px; + } + } + .btns Button { + margin: 20px 0px; + font-size: 16px; + margin-bottom: 0; + } + .iconss { + display: flex; + gap: 16px; + position: absolute; + right: 0; + } + + @media (max-width: 968px) { + /* .cards { + flex-direction: column; + justify-content: center; + margin: auto; + align-items: center; + } */ + .btn { + justify-content: center; + } + + .card_head { + align-items: flex-start; + } + .product_cards { + display: flex; + flex-direction: column; + justify-content: center; + } + .btns { + font-size: 16px; + flex-direction: row; + } + } + @media (max-width: 807px) { + .product_hero_text h1 { + font-size: 34px; + } + .product_hero_text p { + font-size: 17px; + } + .product_cards h2 { + font-size: 40px; + } + } + @media (max-width: 600px) { + .product_cards .card { + width: 440px; + } + } + @media (max-width: 509px) { + .product_cards .card { + width: 420px; + } + } + @media (max-width: 494px) { + .card_head .title { + padding: 10px; + font-size: 24px; + } + .product_hero_img img { + width: 100%; + } + /* .btn{ + font-size: 12px; + } */ + } + @media (max-width: 418px) { + .product_cards .card { + width: 100%; + padding: 1rem; + /* margin: 14px; */ + } + } + @media (max-width: 354px) { + .product_hero_img img { + width: 100%; + } + .product_cards .card { + width: 280px; + padding: 16px; + } + .card_head { + margin: 0; + padding: 0; + } + /* .card_head .title { + padding: 0; + margin: 4px; + font-size: 16px; + } */ + .btns { + scale: 0.8; + } + .card .text { + font-size: 14px; + } + .iconss img { + width: 20px; + } + } `; export default SistentWrapper;