diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..22c945e --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,29 @@ +name: CI +on: + push: + branches: [ master, dewanshrawat15-patch* ] + pull_request: + branches: [ master ] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v2.3.1 + with: + persist-credentials: false + + - name: Install and Build 🔧 + run: | + npm install + npm run build + npm run demo:prod + + - name: Deploy 🚀 + uses: JamesIves/github-pages-deploy-action@3.6.2 + with: + GITHUB_TOKEN: ${{ secrets.Devfolio_Token }} + BRANCH: gh-pages + FOLDER: dist + CLEAN: true diff --git a/src/demo/index.tsx b/src/demo/index.tsx index 4db66df..c84d276 100644 --- a/src/demo/index.tsx +++ b/src/demo/index.tsx @@ -8,8 +8,8 @@ const App = () => ( style={{ display: "flex", alignItems: "center", flexDirection: "column" }} >

Copy email address to clipboard

- + ); -ReactDOM.render(, document.getElementById("app")); +ReactDOM.render(, document.getElementById("app")); \ No newline at end of file diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 5313063..d20559b 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -25,8 +25,8 @@ const containerBaseStyles: React.CSSProperties = { position: "relative", }; -const tooltipBaseStyles: React.CSSProperties = { - bottom: "26px", +const tooltipBaseStyles = (pos: string): React.CSSProperties => ({ + [pos === "above" ? "bottom" : "top"]: "26px", maxWidth: "fit-content", position: "absolute", width: "auto", @@ -41,10 +41,10 @@ const tooltipBaseStyles: React.CSSProperties = { padding: "6px 8px", borderRadius: "5px", opacity: 0, - transform: "translateY(-5px)", + transform: `translateY(${pos === "above" ? "-5px": "5px"})`, visibility: "hidden", transition: "all 0.2s ease-in-out", -}; +}); const toolTipVisibleStyles: React.CSSProperties = { opacity: 1, @@ -60,6 +60,7 @@ const CopyMailTo = ({ containerStyles = {}, tooltipStyles = {}, anchorStyles = {}, + pos = "above", }: { email: string; children?: React.ReactNode; @@ -68,6 +69,7 @@ const CopyMailTo = ({ containerStyles?: React.CSSProperties; tooltipStyles?: React.CSSProperties; anchorStyles?: React.CSSProperties; + pos?: string; }): JSX.Element => { const [showCopied, setShowCopied] = React.useState(false); const [showTooltip, setShowTooltip] = React.useState(false); @@ -101,10 +103,10 @@ const CopyMailTo = ({ }; const allTooltipStyles = { - ...tooltipBaseStyles, - ...tooltipStyles, - ...(showTooltip && toolTipVisibleStyles), - }; + ...tooltipBaseStyles(pos), + ...tooltipStyles, + ...(showTooltip && toolTipVisibleStyles), + }; return ( @@ -127,4 +129,4 @@ const CopyMailTo = ({ ); }; -export default CopyMailTo; +export default CopyMailTo; \ No newline at end of file