import Button from "../components/Button"; import Tag from "../components/Tag"; import Counter from "../components/Counter"; import Input from "../components/Input"; import Search from "../components/Search"; import SearchWidthSuggest from "../components/search-with-suggest"; import Radio from "../components/Radio"; import Checkbox from "../components/Checkbox"; import SelectRadio from "../components/SelectRadio"; import SelectCheckbox from "../components/SelectCheckbox"; import Switch from "../components/Switch"; import VerticalExpandableProductFilter from "../components/VerticalExpandableProductFilter"; import SidebarCategoryHover from "../components/SidebarCategoryHover"; import Slider from "../components/Slider"; import Range from "../components/Range"; import Alert from "../components/Alert"; import Toast from "../components/Toast"; import StarRating from "../components/StarRating"; import Chart from "../components/Recharts"; import CircularProgressbar from "../components/CircularProgressbar"; import Stepper from "../components/Stepper"; import Product from "../components/Product"; import Navbar from "../components/Navbar"; import SimpleCalendar from '../components/Calendar'; import Footer from "../components/Footer"; import SimpleDatePicker from "../components/SimpleDatePicker"; import RangeDatePicker from '../components/RangeDatePicker'; import Comments from "../components/Comments"; import Feedback from "../components/Feedback"; import Features from '../components/Features'; import Blogs from "../components/Blogs"; import ProductSuggestion from "../components/ProductSuggestion"; const components = [ { name: "Button", author: "Andalib", props: [], content: { name: "Button", component: <Button buttonBgColor="bg-blue-500" />, code: null, }, }, { name: "Tag", author: "Andalib", props: [], content: { name: "Tag", component: <Tag />, code: null, }, }, { name: "Input", author: "Ashrafi", props: [ { name: "maxLength", type: "string", required: "false", description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.", defaultValue: "", }, { name: "lang", type: "string", required: "false", description: "زبان سایت", defaultValue: "fa", }, { name: "inputMode", type: "string", required: "false", description: "با تعیین این مقدار نوع کیبرد مشخص میشود.", defaultValue: "text", }, { name: "label", type: "string", required: "false", description: "", defaultValue: "label", }, ], content: { name: "Input", component: <Input />, code: `import React, { useState } from "react"; import _ from "lodash"; import "./index.scss"; import tick from "./tick.png"; import danger from "./danger.png"; const langDetector = (lang, option1, option2) => { return lang === "fa" ? option1 : option2; }; const inputStatusHandler = (value, focus, status, primary, success, danger) => { if (!focus) { return ""; } else { if (!value) { return primary; } else { if (status) { return success; } else { return danger; } } } }; export default function Input(props) { const [value, setValue] = useState(""); const [focusToggle, setFocusToggle] = useState(false); const { lang, theme, inputMode, label, status, maxLength, message } = props; const onChange = (val) => { setValue(val); }; return ( <div className={_.join( ["input flex flex-col relative my-2", langDetector(lang, "fa", "en")], " " )} > <label className={_.join( [ "absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300", langDetector(lang, "right-2", "left-2"), inputStatusHandler( value, focusToggle, status, "input__labelFocus", "input__labelSuccess", "input__labelDanger" ), ], " " )} onClick={() => setFocusToggle(true)} > {label} </label> <input type="text" inputMode={inputMode} className={_.join( [ "flex-1 border rounded-md outline-none p-2", inputStatusHandler( value, focusToggle, status, "input__inputActive", "input__inputSuccess", "input__inputDanger" ), "transition", ], " " )} onChange={(e) => onChange(e.target.value)} value={value} onFocus={() => setFocusToggle(true)} onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)} maxLength={maxLength} /> {!status && value && ( <img src={danger} alt={langDetector(lang, "اشتباه", "wrong")} className={_.join( [ "w-4 h-4 absolute top-1/2 transform -translate-y-1/2", langDetector(lang, "left-2", "right-2"), ], " " )} /> )} {status && value && ( <img src={tick} alt={langDetector(lang, "درست", "right")} className={_.join( [ "w-4 h-4 absolute top-1/2 transform -translate-y-1/2", langDetector(lang, "left-2", "right-2"), ], " " )} /> )} {value && !status && ( <span className={_.join( [ "input__message text-xs absolute -bottom-5", langDetector(lang, "right-2", "left-2"), inputStatusHandler( value, focusToggle, status, "", "input__messageSuccess", "input__messageDanger" ), "transition", ], " " )} > {message} </span> )} {value && ( <span className={_.join( [ "input__length absolute -bottom-5 text-xs", langDetector(lang, "left-2", "right-2"), inputStatusHandler( value, focusToggle, status, "", "input__lengthSuccess", "input__lengthDanger" ), "transition", ], " " )} > {value.length + "/" + maxLength} </span> )} </div> ); } Input.defaultProps = { lang : 'fa', inputMode : 'string', label : '', status : '', maxLength : '', message : '', }`, }, }, { name: "Search", author: "Ashrafi", props: [], content: { name: "Search", component: <Search />, code: null, }, }, { name: "Search with suggestion", author: "Ashrafi", props: [], content: { name: "Search with suggestion", component: <SearchWidthSuggest />, code: null, }, }, { name: "Radio", author: "Ashrafi", props: [], content: { name: "Radio", component: <Radio />, code: null, }, }, { name: "Checkbox", author: "Ashrafi", props: [], content: { name: "Checkbox", component: <Checkbox />, code: null, }, }, { name: "Select box - Radio", author: "Ashrafi", props: [], content: { name: "Select box - Radio", component: <SelectRadio />, code: null, }, }, { name: "Select box - Checkbox", author: "Ashrafi", props: [], content: { name: "Select box - Checkbox", component: <SelectCheckbox />, code: null, }, }, { name: "Switch", author: "Ashrafi", props: [], content: { name: "Switch", component: <Switch />, code: null, }, }, { name: "Expandable products filter", author: "Ashrafi", props: [], content: { name: "Expandable products filter", component: <VerticalExpandableProductFilter />, code: null, }, }, { name: "Sidebar catergory", author: "Ashrafi", props: [], content: { name: "Sidebar category", component: <SidebarCategoryHover />, code: null, }, }, { name: "Slider", author: "Ashrafi", props: [], content: { name: "Slider", component: <Slider />, code: null, }, }, { name: "Range", author: "Ashrafi", props: [], content: { name: "Range", component: <Range />, code: null, }, }, { name: "Counter", author: "Andalib", props: [], content: { name: "Counter", component: <Counter />, code: null, }, }, { name: "Alert", author: "Andalib", props: [], content: { name: "Alert", component: <Alert />, code: null, }, }, { name: "Toast", author: "Andalib", props: [], content: { name: "Toast", component: <Toast />, code: null, }, }, { name: "Star rating", author: "Ashrafi", props: [], content: { name: "Star rating", component: <StarRating />, code: null, }, }, { name: "Chart", author: "Ashrafi", props: [], content: { name: "Chart", component: <Chart />, code: null, }, }, { name: "Circular progressbar", author: "Ashrafi", props: [], content: { name: "Circular progressbar", component: <CircularProgressbar />, code: null, }, }, { name: "Stepper", author: "Ashrafi", props: [], content: { name: "Stepper", component: <Stepper />, code: null, }, }, { name: "Product", author: "Andalib", props: [], content: { name: "Product", component: <Product />, code: null, }, }, { name : "SimpleCalendar", author: "Keshavarzi", props : [ ], content : { name : "SimpleCalendar", component : <SimpleCalendar />, code : null, } }, { name: "Navbar", author: "Andalib", props: [], content: { name: "Navbar", component: <Navbar />, code: null, }, }, { name: "Footer", author: "Andalib", props: [], content: { name: "Footer", component: <Footer />, code: null, }, }, { name: "SimpleDatePicker", author: "Keshavarzi", props: [], content: { name: "SimpleDatePicker", component: <SimpleDatePicker />, code: null, }, }, { name: "RangeDatePicker", author: "Keshavarzi", props: [], content: { name: "RangeDatePicker", component: <div className="flex items-center justify-center w-full my-2"><RangeDatePicker /></div>, code: null, }, }, { name: "Comments", author: "Ashrafi", props: [], content: { name: "Comments", component: <Comments />, code: null, }, }, { name: "Feedback", author: "Andalib", props: [], content: { name: "Feedback", component: <Feedback />, code: null, }, }, { name: "Features", author: "Andalib", props: [], content: { name: "Features", component: <Features />, code: null, }, }, { name: "Blogs", author: "Andalib", props: [], content: { name: "Blogs", component: <Blogs />, code: null, }, }, { name: "Product Suggestion", author: "Andalib", props: [], content: { name: "Product Suggestion", component: <ProductSuggestion />, code: null, }, }, ]; export default components;