diff --git a/package.json b/package.json index 0dc66e05..63450116 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "start:cypress": "PORT=3007 craco start", "build": "craco build", "eject": "craco eject", - "lint": "eslint src --max-warnings 67 --ext .ts --ext .tsx --ignore-pattern *.spec.tsx --ignore-pattern *.spec.ts", + "lint": "eslint src --max-warnings 66 --ext .ts --ext .tsx --ignore-pattern *.spec.tsx --ignore-pattern *.spec.ts", "lint:fix": "npm run lint -- --fix", "prettier": "npx prettier --config .prettierrc.json -w ./src ./cypress", "prettier:check": "npx prettier --config .prettierrc.json --check ./src", diff --git a/src/pages/DailyBountyPage/index.tsx b/src/pages/DailyBountyPage/index.tsx index 4be54b8d..4ce1b95e 100644 --- a/src/pages/DailyBountyPage/index.tsx +++ b/src/pages/DailyBountyPage/index.tsx @@ -1,12 +1,169 @@ -import React from 'react'; +/* eslint-disable react/prop-types */ +import React, { useEffect, useState } from 'react'; +import { EuiLoadingSpinner } from '@elastic/eui'; +import ReactMarkdown from 'react-markdown'; +import styled from 'styled-components'; +import { useIsMobile } from '../../hooks'; +import { colors } from '../../config/colors'; -import { ContentWrapper, Title } from './style'; +interface ColumnProps { + isSecondColumn?: boolean; +} const DailyBountyPage: React.FC = () => { + const [content, setContent] = useState(''); + const [loading, setLoading] = useState(true); + const isMobile = useIsMobile(); + + const color = colors['light']; + + const Body = styled.div<{ isMobile: boolean }>` + flex: 1; + height: ${(p: { isMobile: boolean }) => + p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)'}; + background: ${(p: { isMobile: boolean }) => (p.isMobile ? undefined : color.grayish.G950)}; + width: 100%; + overflow-x: hidden; + overflow-y: auto; + display: flex; + flex-direction: column; + `; + + const ContentWrapper = styled.div` + max-width: 1200px; + margin: 30px auto; + width: 100%; + padding: 40px 30px; + background: white; + `; + + const ContentGrid = styled.div` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + position: relative; + + &:after { + content: ''; + position: absolute; + left: 50%; + top: 0; + bottom: 0; + width: 1px; + background-color: #000000; + transform: translateX(-50%); + } + + @media (max-width: 768px) { + grid-template-columns: 1fr; + gap: 40px; + + &:after { + display: none; + } + } + `; + + const Column = styled.div` + display: flex; + flex-direction: column; + min-height: 100%; + padding: 0 20px; + margin-top: ${(props: ColumnProps) => (props.isSecondColumn ? 'calc(-30px)' : '0')}; + + h1 { + font-size: 24px; + color: ${color.text1}; + margin-bottom: 24px; + font-weight: 500; + } + + h2 { + font-size: 20px; + color: ${color.text1}; + margin: 32px 0 16px; + font-weight: 500; + } + + h3 { + font-size: 18px; + color: ${color.text1}; + margin: 24px 0 12px; + font-weight: 500; + } + + p { + margin-bottom: 16px; + line-height: 1.6; + color: ${color.text2}; + font-size: 15px; + } + + ul, + ol { + padding-left: 24px; + margin-bottom: 16px; + color: ${color.text2}; + font-size: 15px; + + li { + margin-bottom: 8px; + line-height: 1.6; + } + } + + a { + color: ${color.blue2}; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + `; + + useEffect(() => { + const fetchContent = async () => { + try { + const response = await fetch( + 'https://stakwork-uploads.s3.amazonaws.com/admin_customers/8ba670cc-142b-4f75-9e42-aeef44c7025c/TheDailyBounty-Rules.md' + ); + const text = await response.text(); + setContent(text); + } catch (error) { + console.error('Error fetching content:', error); + } finally { + setLoading(false); + } + }; + + fetchContent(); + }, []); + + if (loading) { + return ( + + + + ); + } + + const sections = content.split('--------------------------------------------------'); + const englishContent = sections[0] || ''; + const spanishContent = sections[1]?.replace(/^[\s-]+/, '') || ''; + return ( - - Daily Bounty Page Rules - + + + + + {englishContent} + + + {spanishContent} + + + + ); }; diff --git a/src/pages/DailyBountyPage/style.ts b/src/pages/DailyBountyPage/style.ts deleted file mode 100644 index fcbad0c4..00000000 --- a/src/pages/DailyBountyPage/style.ts +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components'; -import { colors } from '../../config/colors'; - -const color = colors['light']; - -export const ContentWrapper = styled.div` - max-width: 1200px; - margin: 30px auto; - width: 100%; - padding: 40px 30px; - background: white; -`; - -export const Title = styled.h1` - text-align: center; - color: ${color.text1}; - margin-bottom: 40px; - font-size: 28px; - font-weight: 500; -`; diff --git a/src/people/main/Header.tsx b/src/people/main/Header.tsx index 52dfea8d..ff53cb1a 100644 --- a/src/people/main/Header.tsx +++ b/src/people/main/Header.tsx @@ -257,11 +257,6 @@ function Header() { label: 'Bounties', name: 'bounties', path: '/bounties' - }, - { - label: 'Daily Bounty', - name: 'dailyBounty', - path: '/dailyBounty' } ];