update 18 files

master
mahdi 2 years ago
parent cc19e41801
commit c125156bea
  1. 14
      src/Views/Home/Main/index.js
  2. 2
      src/components/Blogs/design1/index.js
  3. 4
      src/components/Blogs/design2/index.js
  4. 4
      src/components/Blogs/design3/index.js
  5. 2
      src/components/Blogs/design4/index.js
  6. 2
      src/components/Blogs/design5/index.js
  7. 2
      src/components/Blogs/design6/index.js
  8. 88
      src/components/Calendar/CalendarComponents/Calendar.js
  9. 2
      src/components/Code/index.js
  10. 4
      src/components/Counter/index.js
  11. 10
      src/components/Features/index.js
  12. 24
      src/components/Footer/index.js
  13. 6
      src/components/Navbar/index.js
  14. 10
      src/components/Product/index.js
  15. 6
      src/components/ProductStatusCard/index.js
  16. 18
      src/components/ProductSuggestion/index.js
  17. 2
      src/components/SidebarMenu/index.js
  18. 4
      src/components/VodProductNew/index.js

@ -7,10 +7,10 @@ function Main({ activeComponent }) {
<div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200">
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
<section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col">
<h1 className="font-bold text-3xl text-left">
<h1 className="font-sansbold text-3xl text-left">
{activeComponent?.content?.name}
</h1>
<span className="font-bold text-xs mb-10 text-left block">
<span className="font-sansbold text-xs mb-10 text-left block">
{activeComponent?.name && `Designed by: ${activeComponent?.author}`}
</span>
{activeComponent?.content?.component}
@ -22,11 +22,11 @@ function Main({ activeComponent }) {
<table className="w-full" style={{ direction: "ltr" }}>
<thead>
<tr>
<th className="font-bold text-lg">Name</th>
<th className="font-bold text-lg">Type</th>
<th className="font-bold text-lg">Required</th>
<th className="font-bold text-lg">Default value</th>
<th className="font-bold text-lg">Description</th>
<th className="font-sansbold text-lg">Name</th>
<th className="font-sansbold text-lg">Type</th>
<th className="font-sansbold text-lg">Required</th>
<th className="font-sansbold text-lg">Default value</th>
<th className="font-sansbold text-lg">Description</th>
</tr>
</thead>
<tbody className="w-full divided divide-y">

@ -19,7 +19,7 @@ const BlogDesign1 = ({
</div>
<div className="w-3/5 mr-4 flex flex-col justify-between py-2">
<div>
<h2 className="text-base text-justify text-grayTextColor font-bold leading-6">
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (

@ -41,11 +41,11 @@ const BlogDesign2 = ({
</button>
)}
<div className="z-10 child-text">
<h2 className="text-white text-base font-bold leading-6">
<h2 className="text-white text-base font-sansbold leading-6">
آیا مواد غذایی پر فیبر مفید هستند؟
</h2>
{blogSubTitle && (
<h2 className="text-white text-base mt-2 font-bold leading-6">
<h2 className="text-white text-base mt-2 font-sansbold leading-6">
شما چه فکری می کنید
</h2>
)}

@ -31,13 +31,13 @@ const BlogDesign3 = ({
{/* <img src={blogFeaturedImage2} alt="" /> */}
<div className="w-full mx-auto p-4 rounded-lg shadow-md bg-white transform translate-y-20">
<h2
className={`text-base text-justify font-bold leading-6 ${blogTitleColor}`}
className={`text-base text-justify font-sansbold leading-6 ${blogTitleColor}`}
>
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogSubTitle && (
<h2
className={`text-base text-justify mt-2 font-bold leading-6 ${blogTitleColor}`}
className={`text-base text-justify mt-2 font-sansbold leading-6 ${blogTitleColor}`}
>
نظر شما چیه
</h2>

@ -21,7 +21,7 @@ const BlogDesign4 = ({
</div>
<div className="w-3/5 flex flex-col justify-between py-3 transform translate-x-10">
<div>
<h2 className="text-base text-grayTextColor font-bold leading-6">
<h2 className="text-base text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (

@ -22,7 +22,7 @@ const BlogDesign5 = ({
</div>
<div className="w-3/5 flex flex-col justify-between py-3 mr-4">
<div>
<h2 className="text-base text-justify text-grayTextColor font-bold leading-6">
<h2 className="text-base text-justify text-grayTextColor font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (

@ -18,7 +18,7 @@ const BlogDesign6 = ({
<div className="">
<img src={FeaturedImage} alt="" className="w-full" />
<div className="py-2">
<h2 className="text-base text-justify text-grayTextColor mt-2 font-bold leading-6">
<h2 className="text-base text-justify text-grayTextColor mt-2 font-sansbold leading-6">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (

@ -1,20 +1,20 @@
import React, { useState, useRef, useEffect } from 'react';
import React, { useState, useRef, useEffect } from "react";
import {
getDateAccordingToMonth,
shallowClone,
getValueType,
} from './shared/generalUtils';
} from "./shared/generalUtils";
import {
TYPE_SINGLE_DATE,
TYPE_RANGE,
TYPE_MUTLI_DATE,
} from './shared/constants';
import { useLocaleUtils, useLocaleLanguage } from './shared/hooks';
} from "./shared/constants";
import { useLocaleUtils, useLocaleLanguage } from "./shared/hooks";
import { Header, MonthSelector, YearSelector, DaysList } from './components';
import { Header, MonthSelector, YearSelector, DaysList } from "./components";
const Calendar = ({
const Calendar = ({
value,
onChange,
onDisabledDayError,
@ -38,12 +38,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
customDaysClassName,
events,
renderEvents,
type
type,
}) => {
const calendarElement = useRef(null);
const [mainState, setMainState] = useState({
activeDate: null,
monthChangeDirection: '',
monthChangeDirection: "",
isMonthSelectorOpen: false,
isYearSelectorOpen: false,
});
@ -51,10 +51,10 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
useEffect(() => {
const handleKeyUp = ({ key }) => {
/* istanbul ignore else */
if (key === 'Tab')
calendarElement.current.classList.remove('-noFocusOutline');
if (key === "Tab")
calendarElement.current.classList.remove("-noFocusOutline");
};
calendarElement.current.addEventListener('keyup', handleKeyUp, false);
calendarElement.current.addEventListener("keyup", handleKeyUp, false);
return () => {
// calendarElement.current.removeEventListener('keyup', handleKeyUp, false);
};
@ -68,8 +68,8 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
setMainState({ ...mainState, [property]: !mainState[property] });
};
const toggleMonthSelector = createStateToggler('isMonthSelectorOpen');
const toggleYearSelector = createStateToggler('isYearSelectorOpen');
const toggleMonthSelector = createStateToggler("isMonthSelectorOpen");
const toggleYearSelector = createStateToggler("isYearSelectorOpen");
const getComputedActiveDate = () => {
const valueType = getValueType(value);
@ -85,8 +85,12 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
: getComputedActiveDate();
const weekdays = weekDaysList.map((weekDay) => (
<abbr key={weekDay.name} title={weekDay.name} className={`Calendar__weekDay ${type}`}>
{ type == 'dashboard' ? weekDay.name : weekDay.short}
<abbr
key={weekDay.name}
title={weekDay.name}
className={`Calendar__weekDay ${type}`}
>
{type == "dashboard" ? weekDay.name : weekDay.short}
</abbr>
));
@ -104,7 +108,7 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
activeDate,
mainState.monthChangeDirection
),
monthChangeDirection: '',
monthChangeDirection: "",
});
};
@ -126,13 +130,14 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
return (
<div
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${isRtl ? 'rtl' : 'ltr'
}`}
className={`Calendar ${type} -noFocusOutline ${calendarClassName} -${
isRtl ? "rtl" : "ltr"
}`}
role="grid"
style={{
'--cl-color-primary': colorPrimary,
'--cl-color-primary-light': colorPrimaryLight,
'--animation-duration': slideAnimationDuration,
"--cl-color-primary": colorPrimary,
"--cl-color-primary-light": colorPrimaryLight,
"--animation-duration": slideAnimationDuration,
}}
ref={calendarElement}
>
@ -196,18 +201,28 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
isQuickSelectorOpen={
mainState.isYearSelectorOpen || mainState.isMonthSelectorOpen
}
showEvent={event => setEventInFooter(event)}
showEvent={(event) => setEventInFooter(event)}
type={type}
/>
<div className="Calendar__footer">
<div className={`footer__Events ${type}`}>
{
type == 'dashboard' ? <><div className='text-xl font-black text-blue-400'>رویداد ها: </div><p className='text-blue-300 font-bold'>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter
}
</div>
{renderFooter()}</div>
{type == "dashboard" ? (
<>
<div className="text-xl font-black text-blue-400">
رویداد ها:{" "}
</div>
<p className="text-blue-300 font-sansbold">
{eventInFooter
? eventInFooter
: "رویدادی در این روز وجود ندارد!"}
</p>
</>
) : (
eventInFooter
)}
</div>
{renderFooter()}
</div>
</div>
);
};
@ -215,17 +230,16 @@ import { Header, MonthSelector, YearSelector, DaysList } from './components';
Calendar.defaultProps = {
minimumDate: null,
maximumDate: null,
colorPrimary: '#0eca2d',
colorPrimaryLight: '#cff4d5',
slideAnimationDuration: '0.4s',
calendarClassName: '',
locale: 'en',
colorPrimary: "#0eca2d",
colorPrimaryLight: "#cff4d5",
slideAnimationDuration: "0.4s",
calendarClassName: "",
locale: "en",
value: null,
renderFooter: () => null,
renderEvents : () => null,
renderEvents: () => null,
customDaysClassName: [],
events: [],
};
export default Calendar;
export default Calendar;

@ -32,7 +32,7 @@ function Code({ code }) {
</span>
</div>
<div
className={`font-bold text-lg cursor-pointer ${
className={`font-sansbold text-lg cursor-pointer ${
height === 350 ? "text-blue-500" : "text-red-500"
}`}
onClick={() => setHeight(() => (height == 350 ? "auto" : 350))}

@ -15,7 +15,9 @@ const Counter = ({ incrementIcon, decrementIcon, flex }) => {
onClick={() => setCount(count + 1)}
/>
<span
className={`text-sm sm:text-base md:text-2xl font-bold text-color ${flex === 'flex-col' ? 'my-2' : 'mx-2'}`}
className={`text-sm sm:text-base md:text-2xl font-sansbold text-color ${
flex === "flex-col" ? "my-2" : "mx-2"
}`}
style={count > 0 ? { color: "green" } : { color: "red" }}
>
{count}

@ -10,7 +10,7 @@ import plane from "./plane.svg";
const Features = ({ features }) => {
return (
<section className="bg-white border-2 border-gray-400 rounded m-7">
<h2 className="text-lg font-bold text-productTitle mr-7 my-5">
<h2 className="text-lg font-sansbold text-productTitle mr-7 my-5">
امکانات و ویژگی ها
</h2>
<div className="w-full flex flex-wrap justify-around items-center">
@ -27,7 +27,9 @@ const Features = ({ features }) => {
</div>
<div className="flex flex-col">
<div className="flex items-center">
<strong className={`text-base font-medium`}>{feature.title}</strong>
<strong className={`text-base font-medium`}>
{feature.title}
</strong>
<span
className={`mr-4 text-xs px-2 py-1 rounded-lg bg-blue-100`}
>
@ -43,9 +45,7 @@ const Features = ({ features }) => {
</div>
<div className="flex flex-col sm:flex-row items-center justify-between py-10 px-7 bg-blue-100 ">
<div>
<h2 className="font-semibold text-base">
هزاران درصد تحفیف
</h2>
<h2 className="font-semibold text-base">هزاران درصد تحفیف</h2>
<p className="mt-4 text-sm">
با وارد کردن کد بهار نگو تابستون از تخفیف 10 درصدی ویژه برخوردار
شوید

@ -13,18 +13,18 @@ const FooterDesign1 = ({ color, bg, links }) => {
>
<div className="flex items-start">
<>
{
links.map((section, index) => <ul className="mr-10" key={index}>
{
section.map((link, index) => <li
className={`font-light text-xs leading-7 hover:font-bold footer-items ${color}`}
key={index}
>
<a href="">{link}</a>
</li>)
}
</ul>)
}
{links.map((section, index) => (
<ul className="mr-10" key={index}>
{section.map((link, index) => (
<li
className={`font-light text-xs leading-7 hover:font-sansbold footer-items ${color}`}
key={index}
>
<a href="">{link}</a>
</li>
))}
</ul>
))}
</>
</div>
<div className="flex items-center mt-10 md:mt-0">

@ -50,11 +50,13 @@ const HeaderDesign1 = ({
</>
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}>
<span className={`text-sm font-sansbold ml-4 text-gray-700`}>
Design System
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
<span
className={`text-sm font-sansbold ${productCategoryTextColor}`}
>
دسته بندی ها
</span>
)}

@ -50,7 +50,7 @@ const ProductDesign = ({
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2">
<p className="text-discountPriceTitle font-bold text-xs">
<p className="text-discountPriceTitle font-sansbold text-xs">
23<span>%</span>
</p>
</div>
@ -148,7 +148,7 @@ const ProductDesign = ({
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
<span className="text-xs text-productContent font-sansbold mr-2">
39
</span>
</div>
@ -190,9 +190,9 @@ const ProductDesign = ({
)}
{productTags && (
<div className="mt-2 flex flex-wrap">
{
productTags.map((item, index) => <Tag title={item} key={index} />)
}
{productTags.map((item, index) => (
<Tag title={item} key={index} />
))}
</div>
)}
{rangeHolder && (

@ -24,13 +24,13 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<img src={item.icon} alt="" className="w-8" />
<div className="flex flex-col mr-3">
<p className="text-sm">
<span className="font-bold">{item.subtitle}</span>
<span className="font-sansbold">{item.subtitle}</span>
{item.title}
</p>
{item.customerSatisfaction && (
<p className="text-xs mt-1">
رضایت خریداران:
<span className="font-bold text-green-500 mr-2">
<span className="font-sansbold text-green-500 mr-2">
{item.customerSatisfactionPercent}
</span>
</p>
@ -64,7 +64,7 @@ const ProductStatusCard = ({ items, productPrice, discountPrice }) => {
<img src={arrow} alt="" className="w-20 h-20" />
</div>
<div className="flex flex-col mr-5">
<h2 className="text-sm font-bold text-blue-900">
<h2 className="text-sm font-sansbold text-blue-900">
بازگشت بی چون و چرا
</h2>
<p className="text-xs mt-2 leading-5 text-justify">

@ -8,13 +8,17 @@ const ProductSuggestion = ({ suggestions }) => {
return (
<section className="m-10 border-2 border-gray-300 p-4 rounded-lg">
<h2 className="text-center text-lg font-bold text-productPrice">
<h2 className="text-center text-lg font-sansbold text-productPrice">
این کالاها برای خرید به شما پیشنهام می دهیم
</h2>
{/* product design */}
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full">
{suggestions.map((suggestion, index) => (
<div className="flex flex-row mb-7 justify-center relative" style={{ width : 'calc(100% / 4.5)' }} key={index}>
<div
className="flex flex-row mb-7 justify-center relative"
style={{ width: "calc(100% / 4.5)" }}
key={index}
>
<div
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer
${selectedProduct === suggestion ? "bg-white" : ""}`}
@ -37,7 +41,11 @@ const ProductSuggestion = ({ suggestions }) => {
</div>
</div>
{Number(index) !== suggestions.length - 1 && (
<img src={plus} alt="" className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2" />
<img
src={plus}
alt=""
className="w-5 absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2"
/>
)}
</div>
))}
@ -45,12 +53,12 @@ const ProductSuggestion = ({ suggestions }) => {
{/* bottom */}
<div className="flex flex-col justify-center items-center mt-4">
<div className="flex flex-row mb-5">
<p className="text-base text-productPrice font-bold">
<p className="text-base text-productPrice font-sansbold">
جمع لوازم اختیاری خریداری شده
<span> 56/894/400 </span>
تومان
</p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold">
<span className="text-lightBlueTextColor text-base mr-1 font-sansbold">
1 کالا
</span>
</div>

@ -24,7 +24,7 @@ const SidebarMenu = ({ items, buttons }) => {
{/* profile */}
<div className="flex flex-row items-center">
<img src={profilePic} alt="" className="w-12 rounded-full" />
<p className="text-blue-600 font-bold text-base flex-1 mx-2">
<p className="text-blue-600 font-sansbold text-base flex-1 mx-2">
کامران کوهستانی شیرازی
</p>
<img src={downwardArrow} alt="" className="w-5" />

@ -69,7 +69,7 @@ const VodProduct = ({
<div className="absolute left-2 top-2">
{discountPricePercent && (
<div className="bg-discountPriceBg rounded-md px-2 py-2 mt-2 transition ease-in-out duration-300 transform hover:-translate-y-1 hover:scale-110 cursor-pointer">
<p className="text-discountPriceTitle font-bold text-xs">
<p className="text-discountPriceTitle font-sansbold text-xs">
23<span>%</span>
</p>
</div>
@ -189,7 +189,7 @@ const VodProduct = ({
{star && (
<div className="flex items-center">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
<span className="text-xs text-productContent font-sansbold mr-2">
39
</span>
</div>

Loading…
Cancel
Save