make DateRangeSection code more generic, add title checkbox for langs card

frontend/frontend/src/components/Home/DateRangeSection.js

@@ -5,12 +5,10 @@ import Section from './Section';
 import { Input } from '../Generic';
 
 const DateRangeSection = ({
-  selectedTimeRange,
-  setSelectedTimeRange,
-  // eslint-disable-next-line no-unused-vars
-  privateAccess,
+  selectedOption,
+  setSelectedOption,
 }) => {
-  const timeRangeOptions = [
+  const options = [
     { id: 1, label: 'Past 1 Month', disabled: false, value: 'one_month' },
     {
       id: 2,
@@ -20,27 +18,26 @@ const DateRangeSection = ({
     },
     { id: 2, label: 'Past 6 Months', disabled: false, value: 'six_months' },
     { id: 3, label: 'Past 1 Year', disabled: false, value: 'one_year' },
-    // { id: 4, label: 'All Time', disabled: !privateAccess, value: 'all_time' },
     { id: 4, label: 'All Time', disabled: true, value: 'all_time' },
   ];
 
-  const selectedOption = selectedTimeRange || timeRangeOptions[2];
+  const defaultOption = 2;
 
   return (
     <Section title="Date Range">
       <p>Select the date range for statistics.</p>
       <Input
-        options={timeRangeOptions}
-        selectedOption={selectedOption}
-        setSelectedOption={setSelectedTimeRange}
+        options={options}
+        selectedOption={selectedOption || options[defaultOption]}
+        setSelectedOption={setSelectedOption}
       />
     </Section>
   );
 };
 
 DateRangeSection.propTypes = {
-  selectedTimeRange: PropTypes.object.isRequired,
-  setSelectedTimeRange: PropTypes.func.isRequired,
+  selectedOption: PropTypes.object.isRequired,
+  setSelectedOption: PropTypes.func.isRequired,
   privateAccess: PropTypes.bool.isRequired,
 };
 

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -37,7 +37,7 @@ const CustomizeStage = ({
   return (
     <div className="w-full flex flex-wrap">
       <div className="h-auto lg:w-2/5 md:w-1/2 pr-10 p-10 rounded-sm bg-gray-200">
-        {cardType === CardTypes.STATS && (
+        {(cardType === CardTypes.STATS || cardType === CardTypes.TOP_LANGS) && (
           <CheckboxSection
             title="Show Title?"
             text="Shows a title at the top of the card."
@@ -66,9 +66,8 @@ const CustomizeStage = ({
           />
         )}
         <DateRangeSection
-          selectedTimeRange={selectedTimeRange}
-          setSelectedTimeRange={setSelectedTimeRange}
-          privateAccess={privateAccess}
+          selectedOption={selectedTimeRange}
+          setSelectedOption={setSelectedTimeRange}
         />
         {cardType === CardTypes.TOP_LANGS && (
           <CheckboxSection