Skip to content

Commit

Permalink
Merge pull request #68 from Lead-Studios/fix-import-errors
Browse files Browse the repository at this point in the history
fix: build errors and incorrect imports
  • Loading branch information
Ibinola authored Jan 29, 2025
2 parents 16982e7 + 41aa9a2 commit 2a99cb9
Show file tree
Hide file tree
Showing 10 changed files with 344 additions and 3,938 deletions.
13 changes: 7 additions & 6 deletions frontend/app/page.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@

import Keyboard from "@/components/Keyboard.jsx";
import Navbar from "@/components/Navbar";
import WordGrid from "@/components/WordGrid";
import Keyboard from "../components/Keyboard.jsx";
import Navbar from "../components/Navbar";
import WordGrid from "../components/WordGrid";


export default function page() {
return (
<div>
<Navbar/>
<WordGrid/>
<Keyboard />
<Navbar />
<WordGrid />
<Keyboard />
</div>
);
}
Expand Down
117 changes: 85 additions & 32 deletions frontend/components/HelpGuide.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
"use client"
"use client";

import React from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { BookOpen, Settings, Gamepad2 } from "lucide-react"
import Link from "next/link"
import { helpContent } from "../app/helpContent"
import React from "react";
import { Button } from "../components/ui/button";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "../components/ui/dialog";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../components/ui/tabs";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { BookOpen, Settings, Gamepad2 } from "lucide-react";
import Link from "next/link";
import { helpContent } from "../app/helpContent";

// Component for rendering individual letter tiles
function LetterTile({ letter, state = "absent" }) {
const baseStyles = "w-8 h-8 flex items-center justify-center text-base font-bold border-2 select-none"
const baseStyles =
"w-8 h-8 flex items-center justify-center text-base font-bold border-2 select-none";
const stateStyles = {
correct: "bg-green-600 text-white border-green-600",
present: "bg-yellow-500 text-white border-yellow-500",
absent: "dark:bg-gray-900 dark:text-white dark:border-gray-600 bg-gray-700 text-white border-gray-300",
}
absent:
"dark:bg-gray-900 dark:text-white dark:border-gray-600 bg-gray-700 text-white border-gray-300",
};

return <div className={`${baseStyles} ${stateStyles[state]}`}>{letter}</div>
return <div className={`${baseStyles} ${stateStyles[state]}`}>{letter}</div>;
}

// Component for rendering a word example with colored tiles
Expand All @@ -29,11 +46,19 @@ function WordExample({ word, correctIndex, presentIndex, absentIndex }) {
<LetterTile
key={index}
letter={letter}
state={index === correctIndex ? "correct" : index === presentIndex ? "present" : index === absentIndex ? "absent" : " "}
state={
index === correctIndex
? "correct"
: index === presentIndex
? "present"
: index === absentIndex
? "absent"
: " "
}
/>
))}
</div>
)
);
}

// Main HelpGuide component
Expand All @@ -49,15 +74,21 @@ export function HelpGuide({ isOpen, onClose }) {
{/* Tab navigation */}
<Tabs defaultValue="getting-started" className="mt-4">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="getting-started" className="flex items-center gap-2">
<TabsTrigger
value="getting-started"
className="flex items-center gap-2"
>
<BookOpen className="h-4 w-4" />
<span className="hidden sm:inline">Getting Started</span>
</TabsTrigger>
<TabsTrigger value="features" className="flex items-center gap-2">
<Gamepad2 className="h-4 w-4" />
<span className="hidden sm:inline">How to Play</span>
</TabsTrigger>
<TabsTrigger value="troubleshooting" className="flex items-center gap-2">
<TabsTrigger
value="troubleshooting"
className="flex items-center gap-2"
>
<Settings className="h-4 w-4" />
<span className="hidden sm:inline">Troubleshooting</span>
</TabsTrigger>
Expand All @@ -68,10 +99,16 @@ export function HelpGuide({ isOpen, onClose }) {
<div className="text-sm text-muted-foreground mb-4">
Welcome! Let's help you get started with our platform.
</div>
<Accordion type="single" collapsible className="w-full hover:no-underline">
<Accordion
type="single"
collapsible
className="w-full hover:no-underline"
>
{helpContent.gettingStarted.map((item, index) => (
<AccordionItem key={index} value={`item-${index}`}>
<AccordionTrigger className="hover:no-underline">{item.title}</AccordionTrigger>
<AccordionTrigger className="hover:no-underline">
{item.title}
</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
Expand All @@ -80,18 +117,22 @@ export function HelpGuide({ isOpen, onClose }) {

{/* How to Play tab content */}
<TabsContent value="features" className="mt-4">
<div className="text-sm text-muted-foreground mb-4">Learn how to play Wordle.</div>
<div className="text-sm text-muted-foreground mb-4">
Learn how to play Wordle.
</div>
<div className="space-y-6">
{helpContent.features.map((section, index) => {
switch (section.type) {
// Header section
case "header":
return (
<div key={index}>
<h2 className="text-2xl font-bold mb-2">{section.title}</h2>
<h2 className="text-2xl font-bold mb-2">
{section.title}
</h2>
<p className="text-base mb-4">{section.subtitle}</p>
</div>
)
);
// Rules section
case "rules":
return (
Expand All @@ -102,12 +143,14 @@ export function HelpGuide({ isOpen, onClose }) {
</p>
))}
</div>
)
);
// Examples section
case "examples":
return (
<div key={index} className="space-y-4">
<h3 className="text-lg font-semibold">{section.title}</h3>
<h3 className="text-lg font-semibold">
{section.title}
</h3>
{section.items.map((item, itemIndex) => (
<div key={itemIndex} className="space-y-2">
<WordExample
Expand All @@ -117,13 +160,22 @@ export function HelpGuide({ isOpen, onClose }) {
absentIndex={item.absentIndex}
/>
<p className="text-sm">
<strong>{item.word[item.absentIndex || item.correctIndex || item.presentIndex || 0]}</strong>{" "}
<strong>
{
item.word[
item.absentIndex ||
item.correctIndex ||
item.presentIndex ||
0
]
}
</strong>{" "}
{item.explanation}
</p>
</div>
))}
</div>
)
);
// Footer section
case "footer":
return (
Expand All @@ -141,12 +193,12 @@ export function HelpGuide({ isOpen, onClose }) {
</Link>
{part}
</React.Fragment>
),
)
)}
</p>
)
);
default:
return null
return null;
}
})}
</div>
Expand All @@ -160,7 +212,9 @@ export function HelpGuide({ isOpen, onClose }) {
<Accordion type="single" collapsible className="w-full">
{helpContent.troubleshooting.map((item, index) => (
<AccordionItem key={index} value={`item-${index}`}>
<AccordionTrigger className="hover:no-underline">{item.title}</AccordionTrigger>
<AccordionTrigger className="hover:no-underline">
{item.title}
</AccordionTrigger>
<AccordionContent>{item.content}</AccordionContent>
</AccordionItem>
))}
Expand All @@ -176,6 +230,5 @@ export function HelpGuide({ isOpen, onClose }) {
</div>
</DialogContent>
</Dialog>
)
);
}

12 changes: 7 additions & 5 deletions frontend/components/Navbar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,13 @@ const Navbar = () => {
/>
</button>

<CircleHelp
color="#29296E"
size={24}
className="hover:scale-110 hover:shadow-lg transition-transform"
/>
<button onClick={() => setIsHelpGuideOpen(true)}>
<CircleHelp
color="#29296E"
size={24}
className="hover:scale-110 hover:shadow-lg transition-transform"
/>
</button>

{/* Connect Button */}
<button className="bg-[#29296E] w-[150px] h-[39px] text-white text-sm font-semibold rounded-[15px] flex items-center justify-center transform transition-transform hover:scale-110 hover:shadow-lg">
Expand Down
80 changes: 45 additions & 35 deletions frontend/components/ui/accordion.jsx
Original file line number Diff line number Diff line change
@@ -1,43 +1,53 @@
"use client"
"use client";

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"
import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils";

const Accordion = AccordionPrimitive.Root
const Accordion = AccordionPrimitive.Root;

const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (
<AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
<AccordionPrimitive.Item
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
className={cn("border-b", className)}
{...props}
/>
));
AccordionItem.displayName = "AccordionItem";

const AccordionTrigger = React.forwardRef(
({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
)
);
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

const AccordionContent = React.forwardRef(
({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
)
);

AccordionContent.displayName = AccordionPrimitive.Content.displayName
AccordionContent.displayName = AccordionPrimitive.Content.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
33 changes: 18 additions & 15 deletions frontend/components/ui/button.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva } from "class-variance-authority";

import { cn } from "@/lib/utils"
import { cn } from "../../lib/utils";

const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
Expand Down Expand Up @@ -31,17 +31,20 @@ const buttonVariants = cva(
size: "default",
},
}
)
);

const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
(<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props} />)
);
})
Button.displayName = "Button"
const Button = React.forwardRef(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = "Button";

export { Button, buttonVariants }
export { Button, buttonVariants };
Loading

0 comments on commit 2a99cb9

Please sign in to comment.