diff --git a/src/sections/Projects/Sistent/components/text-input/code.js b/src/sections/Projects/Sistent/components/text-input/code.js index 3d2c35a33d90..4d740618ff03 100644 --- a/src/sections/Projects/Sistent/components/text-input/code.js +++ b/src/sections/Projects/Sistent/components/text-input/code.js @@ -4,8 +4,25 @@ import { useLocation } from "@reach/router"; import { SistentLayout } from "../../sistent-layout"; import TabButton from "../../../../../reusecore/Button"; +import { Input, SistentThemeProvider } from "@layer5/sistent"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; +import { CodeBlock } from "../button/code-block"; + +const codes = [ + ` + + `, + `This is for the search + `, + ` This is for the password + `, + ` + + ` +]; export const TextInputCode = () => { + const { isDark } = useStyledDarkMode(); const location = useLocation(); return ( @@ -56,7 +73,56 @@ export const TextInputCode = () => { title="Code" /> -
Sorry, this page is still under work
+
+ +

+ Text inputs allow users to enter information in the form of text in order to complete a task or flow or to receive + expected information. +

+ +

Basic Input

+
+

The Input comes in several types: Defualt, Search, Password and Multiline.

+

Defualt Input

+

+ Defualt Text inputs are widely used across interfaces, from filling forms to entering text content. + Icons are rarely needed but can be included if necessary. +

+
+
+ + + +
+ +
+ {/*

Search

+

+ Search text input is used to input search text for a page or a given group + of displayed information to select one or a few from the provided list. + It makes use of two icons that appear across different states. +

*/} + {/*

Password

+

+ This text input functions for fields that require passwords only. With a corresponding + icon to show or hide the any inputted text, this text input functions to receive only + password inputs. +

*/} +

Multiline Input

+

+ Multiline text input functions for input that requires more than one line of text. + This text input adjusts vertically based on the amount of lines of text entered into the text field. +

+
+
+ + + +
+ +
+
+
);