Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question component added along with Component Folder structure #27

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Question component added along with Component Folder structure #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd70cb3
Added Question Component with folder
Pariharx7 Oct 25, 2024
8075b9d
Added QuestionComponents & folder
Pariharx7 Oct 25, 2024
02d29af
Added QuestionComponent & Folder
Pariharx7 Oct 26, 2024
2ae9a41
Added QuestionComponent & Component Folder Structure
Pariharx7 Oct 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 0 additions & 42 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
4 changes: 0 additions & 4 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import { useState } from "react"
import reactLogo from "./assets/react.svg"
import viteLogo from "/vite.svg"
import "./App.css"

function App() {
const [count, setCount] = useState(0)

return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />

Check failure on line 9 in src/App.jsx

View workflow job for this annotation

GitHub Actions / build 

'viteLogo' is not defined
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />

Check failure on line 12 in src/App.jsx

View workflow job for this annotation

GitHub Actions / build 

'reactLogo' is not defined
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>

Check failure on line 17 in src/App.jsx

View workflow job for this annotation

GitHub Actions / build 

'setCount' is not defined
count is {count}

Check failure on line 18 in src/App.jsx

View workflow job for this annotation

GitHub Actions / build 

'count' is not defined
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
Expand Down
18 changes: 18 additions & 0 deletions src/components/QuestionComponent/QuestionComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react'

Check failure on line 1 in src/components/QuestionComponent/QuestionComponent.jsx

View workflow job for this annotation

GitHub Actions / build 

'React' is defined but never used
import StakeInfo from './StakeInfo'
import Questions from './Questions'

const QuestionComponent = () => {
return (
<div className="flex justify-center bg-slate-700 min-h-screen h-full">
<div className="flex flex-col justify-center items-center w-1/2">
<Questions />
</div>
<div className="flex flex-col justify-center w-1/2">
<StakeInfo />
</div>
</div>
)
}

export default QuestionComponent
12 changes: 12 additions & 0 deletions src/components/QuestionComponent/Questions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react'

Check failure on line 1 in src/components/QuestionComponent/Questions.jsx

View workflow job for this annotation

GitHub Actions / build 

'React' is defined but never used

const Questions = () => {
return (
<div className="w-4/5">
<h1 className="text-white text-2xl font-bold">Still have questions?</h1>
<button className="w-2/5 bg-blue-500 hover:bg-blue-700 text-white py-2 px-2 rounded text-xs mt-4" >Read our guides</button>
</div>
)
}

export default Questions
197 changes: 197 additions & 0 deletions src/components/QuestionComponent/StakeInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
import { useState } from 'react';

function StakeInfo() {
const [showSection, setShowSection] = useState(true);

const handleToggleSection = () => {
setShowSection(!showSection);
};

return (
<div
className="text-slate-400 p-4 rounded-md w-4/5"
>
<div className="bg-slate-800 rounded-md rounded-b-none border-b border-slate-600 p-4 flex justify-between">
<h2 className="text-xl font-bold text-white">Who is Stake?</h2>
<button onClick={handleToggleSection}>
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
</div>

{showSection && (
<div className="space-y-4 mt-0 p-2 bg-gray-800 font-semibold rounded-b">
<p className="text-sm">
Leading the online gambling industry since 2017, Stake.com offers a
wide variety of online casino and sports betting options, operating
globally in 15 different languages.
</p>
<p className="text-sm">
With a reputable and secure platform, Stake Casino is home to
worldwide local currencies and crypto betting options for online slot
games, Stake Originals and live casino games. Stake Sportsbook
offers unbeatable odds on all major sporting events including a
range of eSport leagues.
</p>
<p className="text-sm">
We host regular bet bonuses and promotions and offer an exclusive
VIP Club experience - all with a simple-to-use deposit process on our
licensed platform.
</p>
</div>
)}

<div className="bg-slate-800 flex justify-between rounded-md p-4 mt-4 mb-4">
<div>
<h3 className="text-lg font-bold text-white">Is Stake licensed?</h3>
</div>
<div className="flex justify-between items-center">
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>

<div className="bg-slate-800 flex justify-between rounded-md p-4 mb-4">
<h3 className="text-lg font-bold text-white">Is betting on Stake safe?</h3>
<div className="flex justify-between items-center">
<div className="text-gray-400">
{/* Add your content here */}
</div>
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>

<div className="bg-slate-800 flex justify-between rounded-md p-4 mb-4">
<h3 className="text-lg font-bold text-white">What currencies can I bet with?</h3>
<div className="flex justify-between items-center">
<div className="text-gray-400">
{/* Add your content here */}
</div>
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>

<div className="bg-slate-800 flex justify-between rounded-md p-4 mb-4">
<h3 className="text-lg font-bold text-white">What type of casino games can I play?</h3>
<div className="flex justify-between items-center">
<div className="text-gray-400">
{/* Add your content here */}
</div>
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>
<div className="bg-slate-800 flex justify-between rounded-md p-4 mb-4">
<h3 className="text-lg font-bold text-white">What sports can I bet on?</h3>
<div className="flex justify-between items-center">
<div className="text-gray-400">
{/* Add your content here */}
</div>
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>
<div className="bg-slate-800 flex justify-between rounded-md p-4 mb-4">
<h3 className="text-lg font-bold text-white">How do I watch live streams?</h3>
<div className="flex justify-between items-center">
<div className="text-gray-400">
{/* Add your content here */}
</div>
<svg
className="w-6 h-6 text-white cursor-pointer"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
</div>

</div>


);
}

export default StakeInfo;
Loading