aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #144 from YashKandalkar/addon-enhancement

Browse Source 
[fix]: text wrapping below checkbox on mobile
This commit is contained in:
Rahul Jain
2020-10-01 19:07:23 +05:30
committed by GitHub
parent b1c813540f 0a73c08dcf
commit 8dd547e88d
1 changed files with 59 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/addons.js
+59 -67
View File
@@ -3,6 +3,23 @@ import { withPrefix } from "gatsby"
import { latestBlogs } from "../utils/workflows"
import links from "../constants/page-links"
import { isMediumUsernameValid } from "../utils/validation"
const AddonsItem = ({inputId, inputChecked, onInputChange, ...props}) => {
return (
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor={inputId} className="cursor-pointer flex items-center">
<input
type="checkbox"
id={inputId}
checked={inputChecked}
onChange={onInputChange}
/>
<span className="pl-4">{props.children}</span>
</label>
</div>
)
}
const Addons = props => {
const blogPostPorkflow = () => {
let payload = {
@@ -36,73 +53,48 @@ const Addons = props => {
<div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
Add-ons
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="visitors-count" className="cursor-pointer">
<input
type="checkbox"
id="visitors-count"
checked={props.data.visitorsBadge}
onChange={event => props.handleCheckChange("visitorsBadge")}
/>
&nbsp; display visitors count badge
</label>
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="github-stats" className="cursor-pointer">
<input
id="github-stats"
type="checkbox"
checked={props.data.githubStats}
onChange={event => props.handleCheckChange("githubStats")}
/>
&nbsp; display github profile stats card
</label>
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="top-languages" className="cursor-pointer">
<input
id="top-languages"
type="checkbox"
checked={props.data.topLanguages}
onChange={event => props.handleCheckChange("topLanguages")}
/>
&nbsp; display top skills
</label>
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="dev-dynamic-blogs" className="cursor-pointer">
<input
id="dev-dynamic-blogs"
type="checkbox"
checked={props.data.devDynamicBlogs}
onChange={event => props.handleCheckChange("devDynamicBlogs")}
/>
&nbsp; display latest dev.to blogs dynamically (GitHub Action)
</label>
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="medium-dynamic-blogs" className="cursor-pointer">
<input
id="medium-dynamic-blogs"
type="checkbox"
checked={props.data.mediumDynamicBlogs}
onChange={event => props.handleCheckChange("mediumDynamicBlogs")}
/>
&nbsp; display latest medium blogs dynamically (GitHub Action)
</label>
</div>
<div className="py-2 flex justify-start items-center text-sm sm:text-lg">
<label htmlFor="rss-dynamic-blogs" className="cursor-pointer">
<input
id="rss-dynamic-blogs"
type="checkbox"
checked={props.data.rssDynamicBlogs}
onChange={event => props.handleCheckChange("rssDynamicBlogs")}
/>
&nbsp; display latest blogs from your personal blog dynamically
(GitHub Action)
</label>
</div>
<AddonsItem
inputId="visitors-count"
inputChecked={props.data.visitorsBadge}
onInputChange={() => props.handleCheckChange("visitorsBadge")}
>
display visitors count badge
</AddonsItem>
<AddonsItem
inputId="github-stats"
inputChecked={props.data.githubStats}
onInputChange={() => props.handleCheckChange("githubStats")}
>
display github profile stats card
</AddonsItem>
<AddonsItem
inputId="top-languages"
inputChecked={props.data.topLanguages}
onInputChange={() => props.handleCheckChange("topLanguages")}
>
display top skills
</AddonsItem>
<AddonsItem
inputId="dev-dynamic-blogs"
inputChecked={props.data.devDynamicBlogs}
onInputChange={() => props.handleCheckChange("devDynamicBlogs")}
>
display latest dev.to blogs dynamically (GitHub Action)
</AddonsItem>
<AddonsItem
inputId="medium-dynamic-blogs"
inputChecked={props.data.mediumDynamicBlogs}
onInputChange={() => props.handleCheckChange("mediumDynamicBlogs")}
>
display latest medium blogs dynamically (GitHub Action)
</AddonsItem>
<AddonsItem
inputId="rss-dynamic-blogs"
inputChecked={props.data.rssDynamicBlogs}
onInputChange={() => props.handleCheckChange("rssDynamicBlogs")}
>
display latest blogs from your personal blog dynamically (GitHub Action)
</AddonsItem>
{(props.data.devDynamicBlogs && props.social.dev) ||
(props.data.rssDynamicBlogs && props.social.rssurl) ||