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";
import PanelSidebar from "../components/SidebarMenu";
import Advertisement from "../components/Advertisement";
import CourseChapter from "../components/CourseChapter";
import Design2D from "../components/Design2D";
import ProductStatusCard from "../components/ProductStatusCard";
import VodProductNew from "../components/VodProductNew";
import AddToCartCard from "../components/AddToCart";
import ProductDescription from "../components/ProductDescription";
import QandA from "../components/QandA";
import Banners from "../components/Banners";
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: "SimpleCalendar",
author: "Keshavarzi",
props: [],
content: {
name: "SimpleCalendar",
component: ,
code: null,
},
},
{
name: "Navbar",
author: "Andalib",
props: [],
content: {
name: "Navbar",
component: ,
code: null,
},
},
{
name: "Footer",
author: "Andalib",
props: [],
content: {
name: "Footer",
component: ,
code: null,
},
},
{
name: "SimpleDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "SimpleDatePicker",
component: ,
code: null,
},
},
{
name: "RangeDatePicker",
author: "Keshavarzi",
props: [],
content: {
name: "RangeDatePicker",
component: (
),
code: null,
},
},
{
name: "Comments",
author: "Ashrafi",
props: [],
content: {
name: "Comments",
component: ,
code: null,
},
},
{
name: "Feedback",
author: "Andalib",
props: [],
content: {
name: "Feedback",
component: ,
code: null,
},
},
{
name: "Features",
author: "Andalib",
props: [],
content: {
name: "Features",
component: ,
code: null,
},
},
{
name: "Blogs",
author: "Andalib",
props: [],
content: {
name: "Blogs",
component: ,
code: null,
},
},
{
name: "Product Suggestion",
author: "Andalib",
props: [],
content: {
name: "Product Suggestion",
component: ,
code: null,
},
},
{
name: "Panel Sidebar",
author: "Andalib",
props: [],
content: {
name: "Panel Sidebar",
component: ,
code: null,
},
},
{
name: "Advertisements",
author: "Andalib",
props: [],
content: {
name: "Advertisements",
component: ,
code: null,
},
},
{
name: "Course Chapter",
author: "Andalib",
props: [],
content: {
name: "Course Chapter",
component: ,
code: null,
},
},
{
name: "2D Design",
author: "Andalib",
props: [],
content: {
name: "2D Design",
component: ,
code: null,
},
},
{
name: "Product Status Card",
author: "Andalib",
props: [],
content: {
name: "Product Status Card",
component: ,
code: null,
},
},
{
name: "VOD Product",
author: "Andalib",
props: [],
content: {
name: "VOD Product",
component: ,
code: null,
},
},
{
name: "AddToCartCard",
author: "Keshavarzi",
props: [],
content: {
name: "AddToCartCard OR Product Status Card",
component: ,
code: null,
},
},
{
name: "ProductDescription",
author: "Keshavarzi",
props: [],
content: {
name: "Product Description Table",
component: } />,
code: null,
},
},
{
name: "QandA",
author: "Keshavarzi",
props: [],
content: {
name: "Question And Answer Container",
component: ,
code: null,
},
},
{
name: "Banners",
author: "Keshavarzi",
props: [],
content: {
name: "Banners Container",
component: ,
code: null,
},
},
];
export default components;