diff --git a/frontend/frontend/src/components/Home/StatsLayoutSection.js b/frontend/frontend/src/components/Home/StatsLayoutSection.js new file mode 100644 index 00000000..bee5c8eb --- /dev/null +++ b/frontend/frontend/src/components/Home/StatsLayoutSection.js @@ -0,0 +1,39 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Section from './Section'; +import { Input } from '../Generic'; + +export const DEFAULT_OPTION = { + id: 1, + label: 'Rank', + disabled: false, + value: 'default', +}; + +const StatsLayoutSection = ({ selectedOption, setSelectedOption }) => { + const options = [ + DEFAULT_OPTION, + { id: 2, label: 'Percentile', disabled: false, value: 'percentile' }, + { id: 3, label: 'GitHub', disabled: false, value: 'github' }, + { id: 4, label: 'None', disabled: false, value: 'default&hide_rank=true' }, + ]; + + return ( +
+

Select a card layout.

+ +
+ ); +}; + +StatsLayoutSection.propTypes = { + selectedOption: PropTypes.object.isRequired, + setSelectedOption: PropTypes.func.isRequired, +}; + +export default StatsLayoutSection; diff --git a/frontend/frontend/src/pages/Home/Home.js b/frontend/frontend/src/pages/Home/Home.js index 820c436a..d7f0f6ab 100644 --- a/frontend/frontend/src/pages/Home/Home.js +++ b/frontend/frontend/src/pages/Home/Home.js @@ -39,9 +39,8 @@ const HomeScreen = () => { const [imageSrc, setImageSrc] = useState(`?&username=${userId}`); // for stage two - const [selectedStatsLayout, setSelectedStatsLayout] = useState( - STATS_DEFAULT_LAYOUT, - ); + const [selectedStatsLayout, setSelectedStatsLayout] = + useState(STATS_DEFAULT_LAYOUT); const [selectedLanguagesLayout, setSelectedLanguagesLayout] = useState( LANGUAGES_DEFAULT_LAYOUT, ); @@ -85,7 +84,7 @@ const HomeScreen = () => { let fullSuffix = `${imageSrc}`; - if(selectedStatsLayout !== STATS_DEFAULT_LAYOUT) { + if (selectedStatsLayout !== STATS_DEFAULT_LAYOUT) { fullSuffix += `&rank_icon=${selectedStatsLayout.value}`; }