Skip to content

Style challenge details page #20

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Style challenge details page #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 35 additions & 29 deletions src/components/Challenges/ChallengeDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB

return (
<div className="min-h-screen bg-gray-50">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Header */}
<div className="mb-8">
<button
Expand All @@ -44,7 +44,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
Back to Challenges
</button>

<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8">
<div className="flex flex-wrap items-center gap-3 mb-4">
<span className={`px-3 py-1 rounded-full text-sm font-medium border ${domainColors[challenge.domain] || 'bg-gray-100 text-gray-800 border-gray-200'}`}>
{challenge.domain}
Expand All @@ -55,7 +55,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
</div>

<h1 className="text-3xl font-bold text-gray-900 mb-4">{challenge.title}</h1>

<div className="flex flex-wrap items-center gap-6 text-sm text-gray-600 mb-6">
<div className="flex items-center">
<Clock className="h-4 w-4 mr-2" />
Expand All @@ -79,31 +79,39 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
{/* Main Content */}
<div className="lg:col-span-2 space-y-8">
{/* Challenge Details */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<h2 className="text-xl font-semibold text-gray-900 mb-6">Challenge Details</h2>

<div className="prose max-w-none">
<h3>What You'll Build</h3>
<p>This challenge requires you to create a comprehensive solution that demonstrates your skills in {challenge.domain.toLowerCase()}. You'll work with real-world constraints and requirements.</p>

<h3>Requirements</h3>
<ul>
<div className="space-y-6">
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8">
<h2 className="text-xl font-bold text-gray-900 mb-4">What You'll Build</h2>
<p className="text-gray-700 leading-relaxed">
This challenge requires you to create a comprehensive solution that demonstrates your skills in {challenge.domain.toLowerCase()}. You'll work with real-world constraints and requirements.
</p>
</div>

<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8">
<h2 className="text-xl font-bold text-gray-900 mb-4">Requirements</h2>
<ul className="list-disc pl-6 text-gray-700 space-y-2">
<li>Follow industry best practices and standards</li>
<li>Create a solution that is user-friendly and accessible</li>
<li>Include proper documentation or explanations</li>
<li>Test your solution thoroughly before submission</li>
</ul>
</div>

<h3>Bonus Challenges</h3>
<ul>
<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8">
<h2 className="text-xl font-bold text-gray-900 mb-4">Bonus Challenges</h2>
<ul className="list-disc pl-6 text-gray-700 space-y-2">
<li>Add responsive design considerations</li>
<li>Implement additional features beyond the basic requirements</li>
<li>Create a presentation or demo of your work</li>
</ul>

<h3>Resources</h3>
<p>Here are some helpful resources to get you started:</p>
<ul>
</div>

<div className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8">
<h2 className="text-xl font-bold text-gray-900 mb-4">Resources</h2>
<p className="text-gray-700 leading-relaxed">
Here are some helpful resources to get you started:
</p>
<ul className="list-disc pl-6 text-gray-700 space-y-2">
<li>Official documentation and guides</li>
<li>Community discussions and examples</li>
<li>Best practice articles and tutorials</li>
Expand All @@ -112,9 +120,9 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
</div>

{/* Submission Form */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-8">
<h2 className="text-xl font-semibold text-gray-900 mb-6">Submit Your Solution</h2>

{/* Submission Type Selector */}
<div className="flex space-x-1 bg-gray-100 rounded-lg p-1 mb-6">
{[
Expand All @@ -125,11 +133,10 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
<button
key={type}
onClick={() => setSubmissionType(type as any)}
className={`flex-1 flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition-colors ${
submissionType === type
className={`flex-1 flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition-colors ${submissionType === type
? 'bg-white text-purple-600 shadow-sm'
: 'text-gray-600 hover:text-gray-900'
}`}
}`}
>
<Icon className="h-4 w-4 mr-2" />
{label}
Expand Down Expand Up @@ -186,11 +193,10 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
<button
onClick={handleSubmit}
disabled={isSubmitted}
className={`w-full py-3 px-4 rounded-lg font-medium transition-all ${
isSubmitted
className={`w-full py-3 px-4 rounded-lg font-medium transition-all ${isSubmitted
? 'bg-green-600 text-white'
: 'bg-purple-600 hover:bg-purple-700 text-white hover:transform hover:scale-[1.02]'
}`}
}`}
>
{isSubmitted ? (
<div className="flex items-center justify-center">
Expand All @@ -207,7 +213,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
{/* Sidebar */}
<div className="space-y-6">
{/* Challenge Stats */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Challenge Stats</h3>
<div className="space-y-3">
<div className="flex items-center justify-between">
Expand All @@ -226,7 +232,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
</div>

{/* Tags */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
<div className="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Skills & Tags</h3>
<div className="flex flex-wrap gap-2">
{challenge.tags.map((tag) => (
Expand All @@ -241,7 +247,7 @@ export const ChallengeDetail: React.FC<ChallengeDetailProps> = ({ challenge, onB
</div>

{/* Achievement */}
<div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl border border-purple-200 p-6">
<div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl border border-purple-200 p-6 shadow-lg">
<div className="flex items-center mb-3">
<Award className="h-6 w-6 text-purple-600 mr-2" />
<h3 className="text-lg font-semibold text-purple-900">Complete This Challenge</h3>
Expand Down