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.
 
 
 

637 lines
18 KiB

import ButtonDesign from "../components/ButtonDesign";
import Design2D from "../components/Design2D";
import AddToCart from "../components/AddToCart";
import Advertisements from "../components/Advertisements";
import Alert from "../components/Alert";
import Toast from "../components/Toast";
import Banners from "../components/Banners";
import Blog from "../components/Blog";
import CardDesgin from "../components/CardDesgin";
import ChartDesign from "../components/ChartDesign";
import ProgressBar from "../components/ProgressBar";
import Checkbox from "../components/Checkbox";
import CommentDesign from "../components/CommentDesign";
import CounterDesign from "../components/CounterDesign";
import CourseList from "../components/CourseList";
import ProductFilter from "../components/ProductFilter";
import Features from "../components/Features";
import Feedback from "../components/Feedback";
import FooterDesign from "../components/FooterDesign";
import Input from "../components/Input";
import Navbar from "../components/Navbar";
import SearchDesign from "../components/SearchDesign";
import SwitchDesign from "../components/SwitchDesign";
import Sidebar from "../components/Sidebar";
import SingleProduct from "../components/SingleProduct";
import Rating from "../components/Rating";
import Tooltip from "../components/Tooltip";
import ProductSuggestionCard from "../components/ProductSuggestionCard";
import ProductDescriptionTable from "../components/ProductDescriptionTable";
import QuestionAnswer from "../components/QuestionAnswer";
// mini components
import MiniComponents from "../components/MiniComponents";
// import ButtonDesign from "./components/buttonDesign/ButtonDesign";
// import ProductDesign from "./components/productDesign/ProductDesign";
// import ProductTags from "./components/productTags/ProductTags";
// import CounterDesign from "./components/counterDesign/CounterDesign";
// import BookDesign from "./components/bookDesign/BookDesign";
// import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
// import BlogDesign2 from "./components/Blogs/design2/BlogDesign2";
// import BlogDesign3 from "./components/Blogs/design3/BlogDesign3";
// import BlogDesign4 from "./components/Blogs/design4/BlogDesign4";
// import BlogDesign5 from "./components/Blogs/design5/BlogDesign5";
// import BlogDesign6 from "./components/Blogs/design6/BlogDesign6";
// import HeaderDesign1 from "./components/Header/desgin1/HeaderDesign1";
// import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
// import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
// import FooterDesign1 from "./components/footer/design1/FooterDesign1";
// import Testttt from "./components/testtttt/Testttt";
// import Features from "./components/Features/index";
// import Feedback from "./components/Feedback/index";
// import ProductSuggestion from "./components/ProductSuggestion";
// import ProductImage from "./components/ProductImage";
// import VodProduct from "./components/VodProduct";
// import VodProductNew from "./components/VodProductNew";
// import ProductTab from "./components/ProductTab";
// import ProductStatusCard from "./components/ProductStatusCard";
// import AdvertisementDesign1 from "./components/Advertisement/design1";
// import AdvertisementDesign2 from "./components/Advertisement/design2";
// import AdvertisementDesign3 from "./components/Advertisement/design3";
// import CourseChapter from "./components/CourseChapter";
// import SidebarMenu from "./components/Sidebar/SidebarMenu";
// import SidebarDesign2 from "./components/Sidebar/SidebarDesign2";
// import SimpleBarChart from "./components/Chart/SimpleBarChart";
// import SpecifiedDomainRadarChart from "./components/Chart/SpecifiedDomainRadarChart";
// import Design1 from "./components/ProductSalesAmount/Design1";
// import Design2 from "./components/ProductSalesAmount/Design2";
// import TableDesign1 from "./components/Table/Design1";
// import ReactTable2 from "./components/ReactTable2";
// import ReactTable3 from "./components/ReactTable3";
// import ReactTable4 from "./components/ReactTable4";
// import ReactTable5 from "./components/ReactTable5";
// import Digikala from "./components/Digikala";
// import Switch from "./components/Switch";
// import BreadCrumb from "./components/BreadCrumb";
// import SearchBox from "./components/SearchBox";
// import Blogs from "./components/Blogs";
// import FileManager from "./components/FileManager";
// import Playlist from "./components/Playlist";
// import Folderlists from "./components/Folderlist";
// import CardHolder from "./components/CardHolder";
// import UploadFile from "./components/UploadFile";
// import BarChartApex from "./components/BarChartApex";
// import SemiDonut from "./components/SemiDonut";
// import FolderTree from "./components/FolderTree";
// import GridListTable from "./components/GridListTable";
// import PopupCard from "./components/PopupCard";
// import OutlineInput from "./components/OutlineInput";
// import CancleIcon from "./components/CancleIcon";
// import ButtonNewDesign from "./components/ButtonNewDesign";
// import TimeLineComponent from "./components/TimeLineComponent";
// import TitleSubtitle from "./components/TitleSubtitle";
// import TimeLine from "./components/TimeLineComponent/Timeline";
// import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther";
// import SelectYear from "./components/SelectYear";
// import IndianaDragScroll from "./components/IndianaDragScroll";
// import CardTrelloDesign from "./components/CardTrelloDesign";
// import CircleInCircle from "./components/CircleInCircle";
// import NewTagDesign from "./components/NewTagDesign";
// import AnimatedProgressBar from "./components/AnimatedProgressBar";
// import ReligiousTimes from "./components/ReligiousTimes";
// import DistributedData from "./components/DistributedData";
// import CardDesign1 from "./components/CardDesign1";
// import CustomToast from "./components/CustomToast";
// import IconText from "./components/IconText";
// import CardDesign2 from "./components/CardDesign2";
// import LeafletMap from "./components/LeafletMap";
// import TestComponentNew from "./components/TestComponentNew";
// import DateRangePicker from "./components/DateRangePicker";
// import BoxNextToEachOther from "./components/BoxNextToEachOther";
// import ProfileInfo from "./components/ProfileInfo";
// import UserProfileInfo from "./components/UserProfileInfo";
// import CurrentTime from "./components/CurrentTime";
// import CurrentDateShamsi from "./components/CurrentDateShamsi";
// import DateTime from "./components/DateTime";
// import CardDesign3 from "./components/CardDesign3";
// import CustomToast2 from "./components/CustomToast2";
// import ContactUsInfoCard from "./components/ContactUsInfoCard";
// import RoomCardInfo from "./components/RoomCardInfo";
// import FormInput from "./components/FormInput";
// import OutlineTextarea from "./components/OutlineTextarea";
const components = [
{
name: "Button Design",
author: "Andalib",
props: [],
content: {
name: "Button Design",
component: <ButtonDesign />,
code: null,
},
},
{
name: "2D Design",
author: "Andalib",
props: [],
content: {
name: "2D Design",
component: <Design2D />,
code: null,
},
},
{
name: "AddToCartCard",
author: "Keshavarzi/Andalib",
props: [],
content: {
name: "AddToCartCard",
component: <AddToCart />,
code: null,
},
},
{
name: "Advertisements",
author: "Andalib",
props: [],
content: {
name: "Advertisements",
component: <Advertisements />,
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: "Banners",
author: "Keshavarzi",
props: [],
content: {
name: "Banners Container",
component: <Banners />,
code: null,
},
},
{
name: "Blog",
author: "Andalib",
props: [],
content: {
name: "Blog Designs",
component: <Blog />,
code: null,
},
},
{
name: "Card",
author: "Andalib",
props: [],
content: {
name: "Card Designs",
component: <CardDesgin />,
code: null,
},
},
{
name: "Chart Design",
author: "Ashrafi-Andalib",
props: [],
content: {
name: "Chart Design",
component: <ChartDesign />,
code: null,
},
},
{
name: "Checkbox",
author: "Ashrafi",
props: [],
content: {
name: "Checkbox",
component: <Checkbox />,
code: null,
},
},
{
name: "Progress Bar",
author: "Ashrafi-Andalib",
props: [],
content: {
name: "Progress Bar",
component: <ProgressBar />,
code: null,
},
},
{
name: "Comment Design",
author: "Ashrafi",
props: [],
content: {
name: "Progress Bar",
component: <CommentDesign />,
code: null,
},
},
{
name: "Counter Design",
author: "Andalib",
props: [],
content: {
name: "Counter Design",
component: <CounterDesign />,
code: null,
},
},
{
name: "Course List",
author: "Andalib",
props: [],
content: {
name: "Course List",
component: <CourseList />,
code: null,
},
},
{
name: "Product Filter",
author: "Ashrafi",
props: [],
content: {
name: "Product Filter",
component: <ProductFilter />,
code: null,
},
},
{
name: "Features",
author: "Andalib",
props: [],
content: {
name: "Features",
component: <Features />,
code: null,
},
},
{
name: "Feedback",
author: "Andalib",
props: [],
content: {
name: "Feedback",
component: <Feedback />,
code: null,
},
},
{
name: "Footer Design",
author: "Andalib",
props: [],
content: {
name: "Footer Design",
component: <FooterDesign />,
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: "Navbar",
author: "Andalib",
props: [],
content: {
name: "Navbar",
component: <Navbar />,
code: null,
},
},
{
name: "Search Design",
author: "Andalib/Ashrafi",
props: [],
content: {
name: "Search Design",
component: <SearchDesign />,
code: null,
},
},
{
name: "Switch Design",
author: "Andalib/Ashrafi",
props: [],
content: {
name: "Switch Design",
component: <SwitchDesign />,
code: null,
},
},
{
name: "Sidebar",
author: "Andalib",
props: [],
content: {
name: "Sidebar",
component: <Sidebar />,
code: null,
},
},
{
name: "Single Product",
author: "Andalib",
props: [],
content: {
name: "Single Product",
component: <SingleProduct />,
code: null,
},
},
{
name: "Rating",
author: "Andalib/Ashrafi",
props: [],
content: {
name: "Rating",
component: <Rating />,
code: null,
},
},
{
name: "Tooltip",
author: "Andalib",
props: [],
content: {
name: "Tooltip",
component: <Tooltip />,
code: null,
},
},
{
name: "Product Suggestion Card",
author: "Andalib",
props: [],
content: {
name: "Product Suggestion Card",
component: <ProductSuggestionCard />,
code: null,
},
},
{
name: "Product Description Table",
author: "Keshavarzi",
props: [],
content: {
name: "Product Description Table",
component: <ProductDescriptionTable />,
code: null,
},
},
{
name: "QandA",
author: "Ashrafi",
props: [],
content: {
name: "QandA",
component: <QuestionAnswer />,
code: null,
},
},
// mini components
{
name: "Mini Components",
author: "Andalib",
props: [],
content: {
name: "Mini Components used in Main Components",
component: <MiniComponents />,
code: null,
},
},
];
export default components;