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
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;
|
|
|