From ce892ea0ddd454cc12a7b191021e7206c15695b7 Mon Sep 17 00:00:00 2001 From: M-Rb3 Date: Fri, 4 Mar 2022 03:00:45 +0200 Subject: [PATCH 01/14] finished wallet dashboard --- components/dashboard/wallet/Balance.js | 34 +- components/dashboard/wallet/ButtonsRow.js | 33 +- components/dashboard/wallet/CoinCard.js | 34 +- components/dashboard/wallet/MarketChart.js | 182 +++++++--- .../dashboard/wallet/TitleAndSearchBox.js | 19 +- components/dashboard/wallet/TotalBalance.js | 154 ++++++-- .../dashboard/wallet/TransactionCard.js | 31 +- .../dashboard/wallet/TransactionsHistory.js | 2 +- components/dashboard/wallet/Trends.js | 51 +-- components/dashboard/wallet/WalletPage.js | 136 +++---- components/dashboard/wallet/WalletTopTabs.js | 45 +++ components/dashboard/wallet/coinsList.js | 114 +++--- components/dashboard/wallet/ownedCoins.js | 22 +- package.json | 2 +- pages/wallet.js | 5 +- public/assets/images/dashboard/BTC.svg | 19 + public/assets/images/dashboard/binance.svg | 19 + public/assets/images/dashboard/ether.svg | 19 + public/assets/images/dashboard/litecoin.svg | 19 + public/assets/images/search-icon.svg | 3 + styles/DashboardCSS/dashboard.scss | 337 ++++++++++++++++-- 21 files changed, 915 insertions(+), 365 deletions(-) create mode 100644 components/dashboard/wallet/WalletTopTabs.js create mode 100644 public/assets/images/dashboard/BTC.svg create mode 100644 public/assets/images/dashboard/binance.svg create mode 100644 public/assets/images/dashboard/ether.svg create mode 100644 public/assets/images/dashboard/litecoin.svg create mode 100644 public/assets/images/search-icon.svg diff --git a/components/dashboard/wallet/Balance.js b/components/dashboard/wallet/Balance.js index 6c18d44a..54dec28f 100644 --- a/components/dashboard/wallet/Balance.js +++ b/components/dashboard/wallet/Balance.js @@ -25,7 +25,7 @@ const CurrencyBalances = (props) => { style={{ width: '100%', height: '100%' }} > {/* title row */} -
@@ -33,18 +33,21 @@ const CurrencyBalances = (props) => { Currency Balances

-
-
-
+
*/} +
+
Loading Chart
} data={chartData} options={{ pieHole: 0.7, + tooltip: { isHtml: true }, backgroundColor: 'transparent', + pieSliceBorderColor: '#1C1D37', slices: colorData, pieSliceText: 'none', chartArea: { width: '100%', height: '100%' }, @@ -53,8 +56,10 @@ const CurrencyBalances = (props) => { />
-
- +
+
+ +
@@ -71,19 +76,20 @@ const CoinsLegend = ({ walletInfo }) => ( style={{ width: '100%', height: '70px', - background: '#F8F9FD', + background: '#20213F', marginBottom: '15px', - padding: '20px 10px', + padding: '0px 10px', + alignItems: 'center', }} > {/* first column name and symbol */}

{ownedCoin.name}

-

{ownedCoin.symbol}

+

{ownedCoin.symbol}

{/* amount owned */}
-

+

{ownedCoin.owned.toFixed(2)}

@@ -91,9 +97,9 @@ const CoinsLegend = ({ walletInfo }) => (
-

+

$ {ownedCoin.AmountInUSD.toFixed(2).toLocaleString()}

diff --git a/components/dashboard/wallet/ButtonsRow.js b/components/dashboard/wallet/ButtonsRow.js index 83c58353..9b7ff6cf 100644 --- a/components/dashboard/wallet/ButtonsRow.js +++ b/components/dashboard/wallet/ButtonsRow.js @@ -1,30 +1,37 @@ import React from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { - faArrowRight, faArrowLeft, faExchangeAlt, + faArrowRight, } from '@fortawesome/free-solid-svg-icons'; +const SwapIcon = () => ( + + + + +); + const ButtonsRow = () => (
-
-
- +
+
+
-

Deposit

+

Deposit

-
-
- +
+
+
-

Swap

+

Swap

-
-
- +
+
+
-

Withdraw

+

Withdraw

); diff --git a/components/dashboard/wallet/CoinCard.js b/components/dashboard/wallet/CoinCard.js index 807b5f82..b4d7624d 100644 --- a/components/dashboard/wallet/CoinCard.js +++ b/components/dashboard/wallet/CoinCard.js @@ -10,50 +10,40 @@ const CoinCard = ({ info, view }) => { return (
{/* Logo */}
-
+ {coinInfo.name} {/* Name */} -
+

{coinInfo.name}

-

{coinInfo.symbol}

+

{coinInfo.symbol}

{/* Value */}

- $ {coinInfo.price.toFixed(2)} + {' '} + USD

= 0 ? '#2DB632' : '#ED5959', + width: '100%', + textAlign: 'left', + color: coinInfo[localCurrentView] >= 0 ? '#16A34A' : '#ED5959', }} > {coinInfo[localCurrentView] >= 0 ? '+' : ''} diff --git a/components/dashboard/wallet/MarketChart.js b/components/dashboard/wallet/MarketChart.js index 03262a32..08d7d3cf 100644 --- a/components/dashboard/wallet/MarketChart.js +++ b/components/dashboard/wallet/MarketChart.js @@ -1,80 +1,152 @@ import React, { useState } from 'react'; import { Chart } from 'react-google-charts'; +import Select from 'react-select'; + +const DropdownIndicator = () => ( + link +); + +const currencies = [ + { label: 'BTC', value: 'BTC' }, + { label: 'ETH', value: 'ETH' }, + { label: 'LTC', value: 'LTC' }, +]; const MarketChart = () => { + const customStyles = { + option: (provided, state) => ({ + ...provided, + color: 'white', + border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent', + background: '#1C1D37', + borderRadius: '8px', + padding: 20, + marginTop: 8, + width: '100%', + cursor: 'pointer', + fontWeight: 'bold', + ':active': { + // ...styles[':active'], + background: '#1C1D37', + }, + }), + control: () => ({ + // none of react-select's styles are passed to + // width: , + display: 'flex', + height: '100%', + }), + menu: (provided) => ({ + ...provided, + // borderBottom: '1px dotted pink', + background: '#1C1D37', + padding: 5, + border: '1px solid #6938EF', + width: '150px', + textAlign: 'center', + marginLeft: '-70px', + }), + container: (provided) => ({ + ...provided, + height: '35px', + margin: '0 !important', + cursor: 'pointer', + paddingLeft: '8px', + border: '1px solid #6938EF', + borderRadius: '100px', + }), + indicatorSeparator: (provided) => ({ + ...provided, + display: 'none', + }), + singleValue: (provided) => { + const opacity = 1; + const color = '#fff'; + const transition = 'opacity 300ms'; + + return { + ...provided, opacity, transition, color, + }; + }, + }; const [currentView, setCurrentView] = useState('Daily'); return (

{/* First row */} -
+

Market Chart

- +
+
); diff --git a/components/dashboard/wallet/TotalBalance.js b/components/dashboard/wallet/TotalBalance.js index 3b7ca6d0..d93d58ab 100644 --- a/components/dashboard/wallet/TotalBalance.js +++ b/components/dashboard/wallet/TotalBalance.js @@ -1,34 +1,134 @@ import React from 'react'; +import Select from 'react-select'; +import Account from '../../Account'; -const TotalBalance = () => ( -
-
- {/* First Row */} -
-

Total Balance

- +const DropdownIndicator = () => ( + link +); -
- {/* Second Row */} -
-

$ 60,300,000

-
- {/* Third Row */} -
- - +const currencies = [ + { label: 'USD', value: 'USD' }, + { label: 'AUD', value: 'AUD' }, + { label: 'JPY', value: 'JPY' }, + { label: 'EUR', value: 'EUR' }, +]; + +const TotalBalance = () => { + const customStyles = { + option: (provided, state) => ({ + ...provided, + color: 'white', + border: state.isSelected ? '2px solid #6938EF' : state.isFocused ? '2px solid #6938EF' : '2px solid transparent', + background: '#1C1D37', + borderRadius: '8px', + padding: 20, + marginTop: 8, + width: '100%', + cursor: 'pointer', + fontWeight: 'bold', + ':active': { + // ...styles[':active'], + background: '#1C1D37', + }, + }), + control: () => ({ + // none of react-select's styles are passed to + // width: , + display: 'flex', + height: '100%', + }), + menu: (provided) => ({ + ...provided, + // borderBottom: '1px dotted pink', + background: '#1C1D37', + padding: 5, + border: '1px solid #6938EF', + width: '150px', + textAlign: 'center', + marginLeft: '-70px', + + }), + container: (provided) => ({ + ...provided, + height: '100%', + margin: '0 !important', + cursor: 'pointer', + paddingLeft: '8px', + border: '1px solid #6938EF', + borderRadius: '100px', + }), + indicatorSeparator: (provided) => ({ + ...provided, + display: 'none', + }), + singleValue: (provided) => { + const opacity = 1; + const color = '#fff'; + const transition = 'opacity 300ms'; + + return { + ...provided, opacity, transition, color, + }; + }, + }; + + return ( +
+
+ {/* First Row */} +
+

+ Total Balance +

+ +
- + {topChapter.length > 0 && }
- {pageToDisplay - && pageToDisplay.map((stat, idx) => ( + {filteredStats.length > 0 + && filteredStats.slice(0, 4).map((stat, idx) => ( ))}
diff --git a/components/chapter/chapter-leaderboard/leaderboard.module.css b/components/chapter/chapter-leaderboard/leaderboard.module.css index 1176fa17..b8e959e9 100644 --- a/components/chapter/chapter-leaderboard/leaderboard.module.css +++ b/components/chapter/chapter-leaderboard/leaderboard.module.css @@ -4,19 +4,17 @@ justify-content: center; align-items: center; padding-bottom: 4em; - background: linear-gradient(180deg, #151371 0%, rgba(21, 19, 113, 0) 100%); } .container { - border: 1px solid white; width: 100%; - max-width: 64em; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em 0; position: relative; + text-align: center; } .heading { @@ -42,18 +40,31 @@ } .title { - font-size: 1.4rem; - text-align: left; + font-style: normal; + font-weight: 600; + font-size: 61px; + text-align: center; + background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + padding: 0; + margin: 0; + margin-bottom: 15px; } .text { - text-align: left; + text-align: center; + padding: 0 3em; + color: white; + font-weight: normal; + font-size: 30px; } .navbar { width: 100%; display: flex; - justify-content: space-between; + justify-content: center; align-items: flex-start; padding: 0 4em; margin-bottom: 2em; @@ -91,7 +102,6 @@ .stats { width: 100%; - padding: 0 2em; } .loadButtonContainer { @@ -111,7 +121,83 @@ background: #151371; color: white; } - +.LeadboardCards{ + display: flex; + justify-content: space-between; + width: 100%; + text-align: center; + letter-spacing: 0.03em; + color: #FFFFFF; + height: 530px; + margin-bottom: 90px; + margin-top: 40px; +} +.LeadboardCards >div{ + background: #1C1D37; + border: 1px solid #6938EF; + width: 30%; + display: flex; + flex-direction: column; + align-items: center; + box-shadow: 0px 0px 18.4694px rgb(0 0 0 / 10%); + border-radius: 18.4694px; +} +.gold{ + height: 100%; +} +.bronze{ + height: 87%; + margin-top: auto; +} +.silver{ + height: 92%; + margin-top: auto; +} +.detail{ + display: flex; + flex-direction: column; + align-items: center; + margin-top: auto; +} +.detail h2{ + font-weight: bold; + font-size: 36px; + text-align: center; + text-transform: capitalize; + letter-spacing: 0.03em; + font-family: 'SF Pro Display', sans-serif; +} +.detail h3{ + font-size: 20px; + display: flex; + text-align: center; + text-transform: capitalize; + color: #FFFFFF; + font-weight: normal; + margin-top: 10px; +} +.detail p{ + font-weight: 600; + font-size: 18px; + display: flex; + text-align: center; + color: #FFFFFF; + margin: 30px 0 10px; +} +.viewBtn{ + margin-bottom: 20px; +} + +.viewBtn a{ + background: #6938EF; + border-radius: 100px; + padding: 18px 30px; + display: block; + font-weight: 600; + font-size: 18px; + text-align: center; + color: #FFFFFF; +} @media screen and (max-width: 1024px) { .container { width: 48em; diff --git a/components/chapter/chapter-map-guide/mapGuide.component.jsx b/components/chapter/chapter-map-guide/mapGuide.component.jsx index 1f7ccecd..fe149ed1 100644 --- a/components/chapter/chapter-map-guide/mapGuide.component.jsx +++ b/components/chapter/chapter-map-guide/mapGuide.component.jsx @@ -5,8 +5,8 @@ const MapGuide = ({ categories }) => (
Chapter Type
{categories - && categories.map(({ _id, LocationLogo, chapter_type }) => ( -
+ && categories.map(({ id, LocationLogo, chapter_type }) => ( +
icon
diff --git a/components/chapter/chapter-map-guide/mapGuide.module.css b/components/chapter/chapter-map-guide/mapGuide.module.css index 6496c7b3..ccab3655 100644 --- a/components/chapter/chapter-map-guide/mapGuide.module.css +++ b/components/chapter/chapter-map-guide/mapGuide.module.css @@ -28,11 +28,14 @@ .icon { margin-right: 1em; + background: #1C1D37; + border-radius: 50%; } .icon > img { width: 100%; height: auto; + padding: 5px; } @media screen and (max-width: 480px) { diff --git a/components/chapter/chapter-map/chapterMap.component.jsx b/components/chapter/chapter-map/chapterMap.component.jsx index 194cafb5..a5d6fb4a 100644 --- a/components/chapter/chapter-map/chapterMap.component.jsx +++ b/components/chapter/chapter-map/chapterMap.component.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { Map, GoogleApiWrapper, Marker } from 'google-maps-react'; import axios from 'axios'; import styles from './chapterMap.module.css'; -import Dropdown from '../chapter-dropdown/dropdown.component'; +// import Dropdown from '../chapter-dropdown/dropdown.component'; import ModalContent from '../chapter-modal-content/modalContent.component'; import MapGuide from '../chapter-map-guide/mapGuide.component'; @@ -10,36 +10,47 @@ const mapStyles = { width: '100%', }; -function formatDate(dateStr) { - const MONTHS = [ - 'Jan', - 'Feb', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'Sept', - 'Oct', - 'Nov', - 'Dec', - ]; - const d = new Date(dateStr); - const year = d.getFullYear(); - const month = MONTHS[d.getMonth()]; - const date = d.getDate(); - - return `${month} ${date} ${year}`; -} - -const ChapterMap = ({ google, token }) => { - const [active, setActiveDropdown] = useState({}); +const categories = [ + { + id: '1', + LocationLogo: '/assets/images/chapter/pre-collage.svg', + chapter_type: 'Pre-College', + }, + { + id: '2', + LocationLogo: '/assets/images/chapter/continental.svg', + chapter_type: 'Continental', + }, + { + id: '3', + LocationLogo: '/assets/images/chapter/national.svg', + chapter_type: 'National', + }, + { + id: '4', + LocationLogo: '/assets/images/chapter/university.svg', + chapter_type: 'University', + }, + { + id: '5', + LocationLogo: '/assets/images/chapter/professional.svg', + chapter_type: 'Professional', + }, + { + id: '6', + LocationLogo: '/assets/images/chapter/regional.svg', + chapter_type: 'Regional', + }, +]; + +const ChapterMap = ({ + google, token, locations, filteredLocations, +}) => { + // const [active, setActiveDropdown] = useState({}); const [modalIsOpen, setIsOpen] = useState(false); const [modalDetails, setModalDetails] = useState({}); const [activeArea, setActive] = useState(); - const [locations, setLocations] = useState([]); - const [filteredLocations, setFilteredLocations] = useState([]); + const [joinRequests, setJoinRequests] = useState([]); const location = new Set(); @@ -62,22 +73,6 @@ const ChapterMap = ({ google, token }) => { const userJoinRequests = findrequests(joinRequests); - useEffect(() => { - axios - .get(`${process.env.BASE_URI}/location`) - .then((res) => res.data) - .then((msg) => msg.data) - .then((data) => { - const newData = data.map((d) => ({ - ...d, - date_founded: formatDate(d.date_founded), - })); - setLocations(newData); - setFilteredLocations(newData); - }) - .catch((err) => console.error(err)); - }, []); - useEffect(() => { if (token) { axios @@ -88,24 +83,26 @@ const ChapterMap = ({ google, token }) => { }) .then((data) => { setJoinRequests(data.data.data); + console.log(data.data.data); }) .catch((err) => console.error(err)); } }, []); - const handlePlaces = (val, category) => { - const getNumFromStr = (str) => { - const result = str.match(/\d+/); - return parseInt(result[0]); - }; - const newLocations = locations.filter((_location) => { - if (category === 'all') return _location; - if (category === 'member_size') return getNumFromStr(_location.member_size) >= getNumFromStr(val); - return _location[category] === val || _location[category] === val; - }); - setFilteredLocations(newLocations); - setActiveDropdown({}); - }; + // const handlePlaces = (val, category) => { + // const getNumFromStr = (str) => { + // const result = str.match(/\d+/); + // return parseInt(result[0]); + // }; + // const newLocations = locations.filter((_location) => { + // if (category === 'all') return _location; + // if (category === 'member_size') return + // getNumFromStr(_location.member_size) >= getNumFromStr(val); + // return _location[category] === val || _location[category] === val; + // }); + // setFilteredLocations(newLocations); + // setActiveDropdown({}); + // }; const handleLocation = (details) => { setModalDetails(details); @@ -115,27 +112,34 @@ const ChapterMap = ({ google, token }) => { } }; - const handleClick = (key) => { - if (Object.keys(active)[0] === key) { - setActiveDropdown({}); - } else { - setActiveDropdown({ [key]: true }); - } - }; + // const handleClick = (key) => { + // if (Object.keys(active)[0] === key) { + // setActiveDropdown({}); + // } else { + // setActiveDropdown({ [key]: true }); + // } + // }; - const handleMapClick = () => { - setActiveDropdown({}); - }; + // const handleMapClick = () => { + // setActiveDropdown({}); + // }; + + const getMarkerImg = (type) => { + let url = ''; + categories.forEach((category) => { + if (type.toLowerCase() === category.chapter_type.toLowerCase()) url = category.LocationLogo; + }); + return url; + }; return (
-
04
CHAPTER MAP
- Checkout chapter locations accross the globe + View chapter locations across the globe
-
+ {/*
+
*/}
@@ -188,14 +192,14 @@ const ChapterMap = ({ google, token }) => { zoom={2} style={mapStyles} initialCenter={{ lat: 47.444, lng: -122.176 }} - onClick={handleMapClick} + // onClick={handleMapClick} > {filteredLocations && filteredLocations.map((place) => ( handleLocation({ ...place })} - icon={{ url: place.LocationLogo }} + icon={{ url: getMarkerImg(place.chapter_type) }} name={place.LocationName} title={place.LocationName} position={{ lat: place.latitude, lng: place.longitude }} @@ -203,7 +207,7 @@ const ChapterMap = ({ google, token }) => { ))} - + {modalIsOpen && (
setIsOpen(!!activeArea)}> diff --git a/components/chapter/chapter-map/chapterMap.module.css b/components/chapter/chapter-map/chapterMap.module.css index ec8afd48..ae5508bc 100644 --- a/components/chapter/chapter-map/chapterMap.module.css +++ b/components/chapter/chapter-map/chapterMap.module.css @@ -52,13 +52,24 @@ } .title { - font-size: 1.4rem; + font-weight: 600; + font-size: 61px; text-align: center; + background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + padding: 0; + margin: 0; + margin-bottom: 15px; } .text { text-align: center; - margin-bottom: 2em; + padding: 0 3em; + color: white; + font-weight: normal; + font-size: 30px; } .navbar { diff --git a/components/chapter/chapter-select/select.component.jsx b/components/chapter/chapter-select/select.component.jsx index 5a732d48..896a2919 100644 --- a/components/chapter/chapter-select/select.component.jsx +++ b/components/chapter/chapter-select/select.component.jsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import styles from './select.module.css'; const Select = ({ @@ -6,70 +6,41 @@ const Select = ({ setItems, onClick, onChange, - toggle, defaultValue, }) => { const [heading, setHeading] = useState(defaultValue); - const [list, setList] = useState([]); - - useEffect(() => { - const arr = []; - if (items) { - items.forEach((item) => { - if (Object.values(item)[0] === true) { - setHeading(Object.keys(item)[0]); - } else { - arr.push(Object.keys(item)[0]); - } - }); - } - setList(arr); - }, [items]); + const [list] = useState([ + { category: 'weekly', text: 'week' }, { category: 'monthly', text: 'Month' }, { category: 'all', text: 'All Time' }, + ]); const handleSelect = (active) => { - const arr = []; const arr2 = []; items.forEach((item) => { const i = Object.keys(item)[0]; - if (i === active) { + if (i === active.category) { setHeading(i); arr2.push({ [i]: true }); } else { - arr.push(i); arr2.push({ [i]: false }); } }); - setList(arr); setItems(arr2); - onChange(active); + onChange(active.category); onClick(); }; return (
-
- {heading} - -
-
- {list + {list && list.map((item, idx) => (
handleSelect(item)} - className={styles.selectItem} + className={`${styles.selectItem} ${heading === item.category && styles.toggle}`} > - {item} + {item.text}
))} -
); }; diff --git a/components/chapter/chapter-select/select.module.css b/components/chapter/chapter-select/select.module.css index e11952db..a859623d 100644 --- a/components/chapter/chapter-select/select.module.css +++ b/components/chapter/chapter-select/select.module.css @@ -1,11 +1,11 @@ .selectContainer { - /* flex: 1 1 auto; */ - width: auto; display: flex; - flex-direction: column; - align-items: flex-end; - position: relative; - z-index: 10; + background: #1C1D37; + border: 1px solid #6938EF; + box-sizing: border-box; + border-radius: 76.6666px; + font-size: 32px; + padding: 0 8px; } .selectHeading { @@ -20,35 +20,41 @@ } .selectList { - height: auto; + /* height: auto; max-height: 0; position: absolute; right: 0; top: 2.2em; white-space: nowrap; transition: all 1s ease-in-out; - overflow: hidden; + overflow: hidden; */ } -.selectList.toggle { - max-height: 20em; - border-bottom: 3px solid #00000e; +.toggle { + background: #6938EF; + border-radius: 70px; } .selectItem { width: auto; - min-width: 6em; + min-width: 4.5em; cursor: pointer; - background: #151371; + /* background: #151371; */ color: white; - padding: 0.2em 2em; + padding: 20px 30px; text-transform: capitalize; + margin: 8px 0; + border-radius: 70px; + transition: .3s ease-in; } .selectItem:hover { - background: #0d0c4b; + color: #6938EF; } +.toggle:hover { + color: white; +} @media screen and (max-width: 480px) { .selectHeading { diff --git a/components/chapter/chapter-slider/ChapterSlider.js b/components/chapter/chapter-slider/ChapterSlider.js new file mode 100644 index 00000000..9d986838 --- /dev/null +++ b/components/chapter/chapter-slider/ChapterSlider.js @@ -0,0 +1,135 @@ +import React, { useState, useEffect } from 'react'; +import Slider from 'react-slick'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +import styles from './slider.module.css'; + +const ChapterSlider = ({ locations: data }) => { + const [currentIndex, setCurrentIndex] = useState(0); + const [sliderRef, setSliderRef] = useState(null); + const [locations, setLocations] = useState(data); + + useEffect(() => { + setLocations(data); + }, [data]); + // Slider Settings + const slidesToShow = 3; + const slidesPerRow = 2; + const totalSlides = slidesToShow * slidesPerRow; + const pagination = Math.ceil(locations.length / totalSlides); + const conditionalInfinite = { + arrows: false, + dots: false, + className: 'chapter__slick-slider', + speed: 2000, + slidesToShow, + slidesPerRow, + infinite: locations.length > totalSlides, + autoplay: false, + slidesToScroll: 1, + afterChange: (current) => { if (current <= pagination) { setCurrentIndex(current); } }, + responsive: [ + { + breakpoint: 1755, + settings: { + slidesToShow: 3, + infinite: locations.length > totalSlides, + }, + }, + { + breakpoint: 1180, + settings: { + slidesToShow: 1, + infinite: locations.length > 1, + }, + }, + ], + }; + const searchHandler = (e) => { + const filterLocation = data.filter( + (location) => location.location.toLowerCase().includes(e.target.value.toLowerCase()) + || location.LocationName.toLowerCase().includes(e.target.value.toLowerCase()) + , + ); + setLocations(filterLocation); + }; + console.log(locations); + return ( +
+
+ All Chapters +
+
+ Search and select a chapter to find out more +
+
+
+ +
+ Search +
+ {locations?.length ? ( + + <> + + {locations.map( + (location) => ( +
+
+ location-img +
+
+ MPA logo +

{location.location}

+
+
+ {location.description} + +
+
+
+
+

Chapter Leader

+

{location.chapter_leader}

+
+
+

Member Size

+

{location.member_size}

+
+
+
+

Chapter Type

+

{location.chapter_type}

+
+
+
+ Join Chapter +

Learn More

+
+
+ ), + )} + +
+
+ control +

+ {locations.length > 0 + ? `${currentIndex + 1}/${pagination}` : '1/1'} +

+ control +
+
+ + + ) : ( + + No Chapters yet + + )} + +
+ ); +}; + +export default ChapterSlider; diff --git a/components/chapter/chapter-slider/slider.module.css b/components/chapter/chapter-slider/slider.module.css new file mode 100644 index 00000000..57c831d7 --- /dev/null +++ b/components/chapter/chapter-slider/slider.module.css @@ -0,0 +1,149 @@ +.cardContainer{ + min-height: 580px; + color: white; + width: 100% !important; + border-radius: 17.6644px; + background: #1C1D37; + border: 1px solid #6938EF; + overflow: hidden; + margin-bottom: 30px; + display: flex !important; + flex-direction: column; +} +.imgWrapper img{ + height: 180px; + object-fit: contain; + width: 100%; + border-bottom: 1.17763px solid #6938EF; + filter: drop-shadow(0px 37.6841px 48.2827px rgba(0, 0, 0, 0.25)); +} +.universityName{ + display: flex; + padding: 20px; + padding-bottom: 10px; + font-weight: 600; + font-size: 18px; + align-items: center; +} +.universityName img{ + margin-right: 10px; +} +.description{ + padding: 0 10px 0px 20px; + font-size: 16px; + font-weight: normal; + margin-bottom: 20px; +} +.detail{ + display: flex; + flex-direction: column; + padding-left: 20px; + padding-right: 10px; + font-size: 16px; + font-weight: 500; +} +.detail h2{ + margin-bottom: 10px; +} +.detail p{ + letter-spacing: 0.03em; + color: #FD05B3; + font-weight: 600; +} +.btnRow{ + display: flex; + margin-top: auto; + margin-bottom: 20px; + justify-content: space-between; + padding-left: 20px; + padding-right: 10px; +} +.btnRow a,.btnRow p{ + font-weight: 600; + font-size: 16px; + border: 1px solid #6938EF; + border-radius: 42.3946px; + padding: 12px 15px; + cursor: pointer; + transition: background 0.3s ease-in; +} +.btnRow a{ + background: #6938EF; +} +.btnRow p:hover{ + background: #6938EF; +} +.title { + font-style: normal; + font-weight: 600; + font-size: 61px; + text-align: center; + background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + padding: 0; + margin: 0; + margin-bottom: 15px; +} + +.text { + text-align: center; + padding: 0 3em; + color: white; + font-weight: normal; + font-size: 30px; +} +.serchBar{ + display: grid; + grid-template-columns: 70% 28%; + grid-gap: 2%; + margin-top: 70px; + margin-bottom: 40px; +} +.serchBar div{ + background: #D9D9D9; + border-radius: 37px; +} + +.serchBar input{ + background: url(/assets/images/chapter/search.svg); + color: black; + padding: 10px 20px 10px 30px; + width: 100%; + height: 100%; + font-weight: 400; + font-size: 24px; + background-repeat: no-repeat; + background-position-x: 97%; + background-position-y: 50%; + border: none; + outline: none; +} +.serchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: rgba(0, 0, 0, 0.66); +} + +.serchBar input:-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: rgba(0, 0, 0, 0.66); +} + +.serchBar input::-ms-input-placeholder { /* Microsoft Edge */ + color: rgba(0, 0, 0, 0.66); +} +.serchBar> a{ + font-weight: 600; + color: white !important; + display: flex; + align-items: center; + justify-content: center; + border-radius: 42.3946px; + background: #6938EF; + font-size: 18px; + margin-right: 6%; +} +.sliderController{ + height: 70px !important; + font-size: 20px; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/components/chapter/chapter-stat/chapterStat.component.jsx b/components/chapter/chapter-stat/chapterStat.component.jsx index acaeed2e..8f7cc658 100644 --- a/components/chapter/chapter-stat/chapterStat.component.jsx +++ b/components/chapter/chapter-stat/chapterStat.component.jsx @@ -1,51 +1,35 @@ import React from 'react'; import styles from './chapterStat.module.css'; -const ChapterStat = ({ - number, place, amount, name, time, idx, -}) => { - const d = new Date(time); - const h = d.getHours(); - const m = d.getMinutes(); - const s = d.getSeconds(); +const titleUpperCase = (title) => { + const words = title.toLowerCase().split(' '); - const isEven = () => { - if (parseInt(idx) % 2 === 0) { - return true; - } - return false; - }; + return words.map((word) => word[0].toUpperCase() + word.substring(1)).join(' '); +}; - return ( -
-
-
-
{number}
-
-
{name}
-
{place}
-
-
-
- {amount} - points - {' '} -
pts
- {' '} -
-
{`${h}:${m}:${s}`}
+const ChapterStat = ({ + place, amount, name, idx, +}) => ( +
+
+
+
{idx + 1}
+
+
{titleUpperCase(name)}
+
{place}
+
+
+
+ {amount} + points
- ); -}; +
+); export default ChapterStat; diff --git a/components/chapter/chapter-stat/chapterStat.module.css b/components/chapter/chapter-stat/chapterStat.module.css index 1fdd8498..6dfbe25d 100644 --- a/components/chapter/chapter-stat/chapterStat.module.css +++ b/components/chapter/chapter-stat/chapterStat.module.css @@ -1,7 +1,5 @@ .wrapper { - background: white; margin-bottom: 1em; - clip-path: polygon(0% 0%, 97% 0, 100% 50%, 97% 100%, 0% 100%); padding: 0.3em; padding-right: 0.5em; } @@ -31,9 +29,10 @@ display: flex; align-items: center; justify-content: space-between; - padding: 1em 2em; - clip-path: polygon(0% 0%, 97.5% 0, 100% 50%, 97.5% 100%, 0% 100%); - z-index: 5; + height: 100px; + background: #1C1D37; + border: 1px solid #6938EF; + border-radius: 10px; } .container.grad2{ @@ -45,17 +44,40 @@ } .number { - margin-right: 2em; + height: 100px; + display: flex; + align-items: center; + width: 100px; + justify-content: center; + background: linear-gradient(91.39deg, #FF00B8 17.68%, #CC00FF 106.94%); + border-radius: 10px 1px 1px 10px; + color: #FFFFFF; + font-weight: bold; + font-size: 48px; + margin-right: 4%; + font-family: 'SF Pro Display', sans-serif; } .nameAndLocation { - flex: 1 1 auto; word-wrap: break-word; + margin-right: auto; + text-align: left; + /* padding: 1em 2em; */ } .amount, .name { - color: #FFC700; + font-weight: bold; + font-size: 26px; + line-height: 31px; + text-align: center; + letter-spacing: 0.03em; + color: #FFFFFF; + font-family: 'SF Pro Display', sans-serif; +} +.amount{ + font-weight: 500; + margin-right: 10px; } .number, @@ -65,7 +87,11 @@ .time { color: white; } - +.location{ + font-size: 18px; + text-transform: capitalize; + font-weight: normal; +} .timeAndPoints { width: auto; } diff --git a/components/chapter/chapter-toolkit-item/toolkit.component.jsx b/components/chapter/chapter-toolkit-item/toolkit.component.jsx index f1215df1..5692e49d 100644 --- a/components/chapter/chapter-toolkit-item/toolkit.component.jsx +++ b/components/chapter/chapter-toolkit-item/toolkit.component.jsx @@ -11,8 +11,9 @@ const ToolkitItem = ({ name, image, slug }) => ( }} > -
- icon +
+ icon +
{name}
 diff --git a/components/chapter/chapter-toolkit-item/toolkit.module.css b/components/chapter/chapter-toolkit-item/toolkit.module.css index d58f67ce..dfef55fb 100644 --- a/components/chapter/chapter-toolkit-item/toolkit.module.css +++ b/components/chapter/chapter-toolkit-item/toolkit.module.css @@ -1,25 +1,40 @@ .container { position: relative; + background: #1C1D37; + border: 1px solid #6938EF; + display: flex; + box-shadow: 0px 0px 18.4694px rgba(0, 0, 0, 0.1); + border-radius: 18.4694px; + padding: 2rem 2rem; +} +.container >a{ + display: flex; + flex-direction: column; + width: 100%; } - .container:hover .overlay { border-top: 2px solid white; border-right: 2px solid white; transform: translate(2px, -2px); } -.container > img { +.container img { width: 100%; height: auto; + margin: auto; } .name { width: 100%; - padding: 1em 0; - background: #FF00B8; + /* padding: 1em 0; */ + /* background: #FF00B8; */ text-align: center; color: white; z-index: 5; + font-weight: bold; + font-size: 30px; + letter-spacing: 0.03em; + margin-top: 10px; } .overlay { @@ -29,7 +44,12 @@ transition: all 0.2s; background: transparent; } - +.imgContainer{ + height: 310px; + display: flex; + width: 85%; + margin: 0 auto; +} @media screen and (max-width: 480px) { .name { font-size: 10px; diff --git a/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx b/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx index 6b3f53ba..88f85d6e 100644 --- a/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx +++ b/components/chapter/chapter-toolkit-menu/chapterToolkit.component.jsx @@ -5,8 +5,8 @@ import ToolkitItem from '../chapter-toolkit-item/toolkit.component'; const Toolkit = () => (
-
02
-
+ +
CHAPTER TOOLKIT
Check out our valuable resources to get insight on our chapters. diff --git a/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css b/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css index c46e3e4e..d1dd506c 100644 --- a/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css +++ b/components/chapter/chapter-toolkit-menu/chapterToolkit.module.css @@ -3,14 +3,13 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(180deg, rgba(21, 19, 113, 0) 0%, #151371 100%); padding-bottom: 4em; position: relative; } .container { width: 100%; - max-width: 64em; + /* max-width: 64em; */ display: flex; flex-direction: column; align-items: center; @@ -30,8 +29,17 @@ } .heading { - font-size: 1.6rem; - color: white; + font-style: normal; + font-weight: 600; + font-size: 61px; + text-align: center; + background: linear-gradient(90.87deg, #97C4F5 -2.84%, #33D2FF 82.04%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + padding: 0; + margin: 0; + margin-bottom: 15px; } .text { @@ -39,13 +47,15 @@ text-align: center; padding: 0 3em; color: white; + font-weight: normal; + font-size: 30px; } .menu { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); - gap: 1em; + gap: 3em; } @media screen and (max-width: 1024px) { diff --git a/components/chapter/chapter-wrapper/ChapterWrapper.module.css b/components/chapter/chapter-wrapper/ChapterWrapper.module.css index 37239270..0c3acfe4 100644 --- a/components/chapter/chapter-wrapper/ChapterWrapper.module.css +++ b/components/chapter/chapter-wrapper/ChapterWrapper.module.css @@ -1,8 +1,4 @@ .wrapper { - background: linear-gradient( - 104.61deg, - #ff00b8 2.65%, - #ff655b 51.83%, - #ffc700 100% - ); + background: #14152B; + font-family: 'Poppins', sans-serif; } \ No newline at end of file diff --git a/pages/chapter/index.js b/pages/chapter/index.js index 989fecb1..73aa1655 100644 --- a/pages/chapter/index.js +++ b/pages/chapter/index.js @@ -1,11 +1,13 @@ import React, { useState, useRef, useEffect, useContext, } from 'react'; +import axios from 'axios'; import HomepageNav from '../../components/homepage/HomepageNav'; import Layout from '../../components/Layout'; import Footer from '../../components/Footer'; import Intro from '../../components/chapter/chapter-intro/intro.component'; import ChapterToolkit from '../../components/chapter/chapter-toolkit-menu/chapterToolkit.component'; +import ChapterSlider from '../../components/chapter/chapter-slider/ChapterSlider'; import ChapterMap from '../../components/chapter/chapter-map/chapterMap.component'; import SidebarTwo from '../../components/sidebar/SidebarTwo'; import links from '../../contexts/utils/links'; @@ -14,11 +16,37 @@ import ChapterWrapper from '../../components/chapter/chapter-wrapper/ChapterWrap import useDetectOutsideClick from '../../components/UseDetectOutsideClick'; import { GlobalContext } from '../../contexts/provider'; +function formatDate(dateStr) { + const MONTHS = [ + 'Jan', + 'Feb', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'Sept', + 'Oct', + 'Nov', + 'Dec', + ]; + const d = new Date(dateStr); + const year = d.getFullYear(); + const month = MONTHS[d.getMonth()]; + const date = d.getDate(); + + return `${month} ${date} ${year}`; +} + const index = () => { const [open, setOpen] = useState(false); const [active, setActive] = useState(''); const [userData, setUserData] = useState([]); const [token, setToken] = useState(null); + // map + const [locations, setLocations] = useState([]); + const [filteredLocations, setFilteredLocations] = useState([]); const { authState: { @@ -39,6 +67,22 @@ const index = () => { } }, [data]); + useEffect(() => { + axios + .get(`${process.env.BASE_URI}/location`) + .then((res) => res.data) + .then((msg) => msg.data) + .then((res) => { + const newData = res.map((d) => ({ + ...d, + date_founded: formatDate(d.date_founded), + })); + console.log(newData); + setLocations(newData); + setFilteredLocations(newData); + }) + .catch((err) => console.error(err)); + }, []); const dropdownRef = useRef(null); const [hide, setHide] = useDetectOutsideClick(dropdownRef, true); const handleClick = () => { @@ -71,7 +115,9 @@ const index = () => { - + + +