You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

670 lines
15 KiB

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: <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,
},
},
{
name: "Panel Sidebar",
author: "Andalib",
props: [],
content: {
name: "Panel Sidebar",
component: <PanelSidebar />,
code: null,
},
},
{
name: "Advertisements",
author: "Andalib",
props: [],
content: {
name: "Advertisements",
component: <Advertisement />,
code: null,
},
},
{
name: "Course Chapter",
author: "Andalib",
props: [],
content: {
name: "Course Chapter",
component: <CourseChapter />,
code: null,
},
},
{
name: "2D Design",
author: "Andalib",
props: [],
content: {
name: "2D Design",
component: <Design2D />,
code: null,
},
},
{
name: "Product Status Card",
author: "Andalib",
props: [],
content: {
name: "Product Status Card",
component: <ProductStatusCard />,
code: null,
},
},
{
name: "VOD Product",
author: "Andalib",
props: [],
content: {
name: "VOD Product",
component: <VodProductNew />,
code: null,
},
},
{
name: "AddToCartCard",
author: "Keshavarzi",
props: [],
content: {
name: "AddToCartCard OR Product Status Card",
component: <AddToCartCard />,
code: null,
},
},
{
name: "ProductDescription",
author: "Keshavarzi",
props: [],
content: {
name: "Product Description Table",
component: <ProductDescription addToCart={<AddToCartCard />} />,
code: null,
},
},
{
name: "QandA",
author: "Keshavarzi",
props: [],
content: {
name: "Question And Answer Container",
component: <QandA />,
code: null,
},
},
{
name: "Banners",
author: "Keshavarzi",
props: [],
content: {
name: "Banners Container",
component: <Banners />,
code: null,
},
},
];
export default components;