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 Calender from '../components/Calender';
const components = [
{
name : "Button",
author : 'Andalib',
props : [
],
content : {
name : "Button",
component : ,
code : null,
}
},
{
name : "Tag",
author : 'Andalib',
props : [
],
content : {
name : "Tag",
component : ,
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: ,
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 (
onChange(e.target.value)}
value={value}
onFocus={() => setFocusToggle(true)}
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)}
maxLength={maxLength}
/>
{!status && value && (

)}
{status && value && (

)}
{value && !status && (
{message}
)}
{value && (
{value.length + "/" + maxLength}
)}
);
}
Input.defaultProps = {
lang : 'fa',
inputMode : 'string',
label : '',
status : '',
maxLength : '',
message : '',
}`,
},
},
{
name: "Search",
author: "Ashrafi",
props: [],
content: {
name: "Search",
component: ,
code: null,
},
},
{
name: "Search with suggestion",
author : "Ashrafi",
props: [],
content: {
name: "Search with suggestion",
component: ,
code: null,
},
},
{
name : "Radio",
author : "Ashrafi",
props : [
],
content : {
name : "Radio",
component : ,
code : null,
}
},
{
name : "Checkbox",
author: "Ashrafi",
props : [
],
content : {
name : "Checkbox",
component : ,
code : null,
}
},
{
name : "Select box - Radio",
author: "Ashrafi",
props : [
],
content : {
name : "Select box - Radio",
component : ,
code : null,
}
},
{
name : "Select box - Checkbox",
author: "Ashrafi",
props : [
],
content : {
name : "Select box - Checkbox",
component : ,
code : null,
}
},
{
name : "Switch",
author: "Ashrafi",
props : [
],
content : {
name : "Switch",
component : ,
code : null,
}
},
{
name : "Expandable products filter",
author: "Ashrafi",
props : [
],
content : {
name : "Expandable products filter",
component : ,
code : null,
}
},
{
name : "Sidebar catergory",
author: "Ashrafi",
props : [
],
content : {
name : "Sidebar category",
component : ,
code : null,
}
},
{
name : "Slider",
author: "Ashrafi",
props : [
],
content : {
name : "Slider",
component : ,
code : null,
}
},
{
name : "Range",
author: "Ashrafi",
props : [
],
content : {
name : "Range",
component : ,
code : null,
}
},
{
name : "Counter",
author: "Andalib",
props : [
],
content : {
name : "Counter",
component : ,
code : null,
}
},
{
name : "Alert",
author: "Andalib",
props : [
],
content : {
name : "Alert",
component : ,
code : null,
}
},
{
name : "Toast",
author: "Andalib",
props : [
],
content : {
name : "Toast",
component : ,
code : null,
}
},
{
name : "Star rating",
author: "Ashrafi",
props : [
],
content : {
name : "Star rating",
component : ,
code : null,
}
},
{
name : "Chart",
author: "Ashrafi",
props : [
],
content : {
name : "Chart",
component : ,
code : null,
}
},
{
name : "Circular progressbar",
author: "Ashrafi",
props : [
],
content : {
name : "Circular progressbar",
component : ,
code : null,
}
},
{
name : "Stepper",
author: "Ashrafi",
props : [
],
content : {
name : "Stepper",
component : ,
code : null,
}
},
{
name : "Product",
author: "Andalib",
props : [
],
content : {
name : "Product",
component : ,
code : null,
}
},
{
name : "Calender",
props : [
],
content : {
name : "Calender",
component : ,
code : null,
}
},
{
name : "Navbar",
author: "Andalib",
props : [
],
content : {
name : "Navbar",
component : ,
code : null,
}
},
];
export default components;