Skip to content

Fixes #729 : Image problem fixed #733

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 2 commits into
base: main
Choose a base branch
from
Open

Fixes #729 : Image problem fixed #733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4738862
Fixes #729 : Image problem fixed
Feb 13, 2025
6f4c1af
Fixes #711 : Added the suggestions in ContentSearch
Feb 14, 2025
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
115 changes: 79 additions & 36 deletions apps/web/components/ContentSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Dialog, DialogClose, DialogContent, Input, Card, CardDescription, CardH
import Image from "next/image"; */
import Fuse from "fuse.js";
import { TrackPros } from "./Tracks";
import { div } from "framer-motion/client";

type Payload = {
problemId: string;
Expand All @@ -21,13 +22,15 @@ interface DataItem {
}

export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
const [startedSearching, setStartedSearching] = useState(false);
const [dialogOpen, setDialogOpen] = useState(false);
const [input, setInput] = useState("");
const [searchTracks, setSearchTracks] = useState<any[]>([]);
const [selectedIndex, setSelectedIndex] = useState(-1);
const scrollableContainerRef = useRef<HTMLDivElement>(null);
const deferredInput = useDeferredValue(input);
const [allTracks, setAllTracks] = useState<DataItem[]>([]);
const [suggestedTracks, setSuggestedTracks] = useState<DataItem[]>([]);
useEffect(() => {
const updatedTracks: DataItem[] = [];
tracks.map((t) => {
Expand All @@ -43,6 +46,7 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
});
});
});
const suggestions: DataItem[] = [];
setAllTracks(updatedTracks);
}, []);
useEffect(() => {
Expand Down Expand Up @@ -115,27 +119,27 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
return (
<Dialog open={dialogOpen} onOpenChange={handleClose}>
<div
className="md:max-w-screen border border-primary/15 p-3 rounded-lg cursor-text w-full mx-auto"
className="md:max-w-screen border-primary/15 mx-auto w-full cursor-text rounded-lg border p-3"
onClick={() => setDialogOpen(true)}
>
<div className="md:flex gap-2 items-center hidden justify-between ">
<div className="flex gap-2 items-center">
<div className="hidden items-center justify-between gap-2 md:flex">
<div className="flex items-center gap-2">
<MagnifyingGlassIcon className="size-4" />
Search
</div>
<kbd className="bg-white/15 p-2 rounded-sm text-sm leading-3">Ctrl + K</kbd>
<kbd className="rounded-sm bg-white/15 p-2 text-sm leading-3">Ctrl + K</kbd>
</div>
<div className="block md:hidden">
<MagnifyingGlassIcon className="size-4" />
</div>
</div>
<DialogContent className="p-0 gap-0 max-w-2xl">
<div className="flex items-center px-6 py-4 border-b">
<DialogContent className="max-w-2xl gap-0 p-0">
<div className="flex items-center border-b px-6 py-4">
<MagnifyingGlassIcon className="size-4" />
<Input
type="text"
placeholder="Search"
className="border-none focus-visible:outline-none focus-visible:ring-0 text-base shadow-none"
className="border-none text-base shadow-none focus-visible:outline-none focus-visible:ring-0"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
Expand All @@ -144,37 +148,76 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
<span className="sr-only">Close</span>
</DialogClose>
</div>
<div className="h-[500px] py-4 space-y-4 overflow-y-scroll" ref={scrollableContainerRef}>
{searchTracks.length > 0 &&
searchTracks.map((track, index) => (
<div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
<Link
className="flex"
href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
target="_blank"
passHref
>
<Card className="p-2 w-full mx-2">
<div className="flex items-center gap-4 py-1 sm:py-2">
<div className="w-16 h-16 sm:w-20 sm:h-20 flex-shrink-0 overflow-hidden rounded-xl">
<img
alt={track.payload.problemTitle}
src={track.payload.image}
className="w-full h-full object-cover"
/>

{searchTracks.length === 0 ? (
<div className="max-h-[500px] space-y-4 overflow-y-scroll py-4" ref={scrollableContainerRef}>
<p className="pl-4"> Suggestions : </p>
{allTracks.map((track, index) => {
return (
<div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
<Link
className="flex"
href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
target="_blank"
passHref
>
<Card className="mx-2 w-full p-2">
<div className="flex items-center gap-4 py-1 sm:py-2">
<div className="min-w-0 flex-1">
<CardHeader className="p-0">
<CardTitle className="text-base sm:text-lg md:text-xl">
{track.payload.problemTitle}
</CardTitle>
<CardDescription className="truncate text-sm">
{" "}
Track : {track.payload.trackTitle}
</CardDescription>
</CardHeader>
</div>
</div>
<div className="flex-1 min-w-0">
<CardHeader className="p-0">
<CardTitle className="text-base sm:text-lg md:text-xl">{track.payload.problemTitle}</CardTitle>
<CardDescription className="text-sm truncate">Track: {track.payload.trackTitle}</CardDescription>
</CardHeader>
</Card>
</Link>
</div>
);
})}
</div>
) : (
<div className="h-[500px] space-y-4 overflow-y-scroll py-4" ref={scrollableContainerRef}>
{searchTracks.length > 0 &&
searchTracks.map((track, index) => (
<div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
<Link
className="flex"
href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
target="_blank"
passHref
>
<Card className="mx-2 w-full p-2">
<div className="flex items-center gap-4 py-1 sm:py-2">
<div className="h-16 w-16 flex-shrink-0 overflow-hidden rounded-xl sm:h-20 sm:w-20">
<img
alt={track.payload.problemTitle}
src={track.payload.image}
className="h-full w-full object-cover"
/>
</div>
<div className="min-w-0 flex-1">
<CardHeader className="p-0">
<CardTitle className="text-base sm:text-lg md:text-xl">
{track.payload.problemTitle}
</CardTitle>
<CardDescription className="truncate text-sm">
Track: {track.payload.trackTitle}
</CardDescription>
</CardHeader>
</div>
</div>
</div>
</Card>
</Link>
</div>
))}
</div>
</Card>
</Link>
</div>
))}
</div>
)}
</DialogContent>
</Dialog>
);
Expand Down
26 changes: 13 additions & 13 deletions apps/web/components/TrackPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,37 +41,37 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
return (
<Dialog open={showPreview} onOpenChange={() => setShowPreview(false)}>
<DialogContent className="flex items-center gap-4">
<div className="flex flex-col gap-4 w-full">
<img src={track.image} className="h-[25vh] w-full object-cover rounded-lg" />
<div className="flex flex-col gap-4 bg-primary/5 rounded-lg p-4">
<div className="flex w-full flex-col gap-4">
<img src={track.image} className="h-[25vh] w-full rounded-lg object-contain" />
<div className="bg-primary/5 flex flex-col gap-4 rounded-lg p-4">
<div className="flex flex-col gap-4">
<h3 className="text-xl md:text-2xl font-semibold w-full tracking-tight">{track.title}</h3>
<h3 className="w-full text-xl font-semibold tracking-tight md:text-2xl">{track.title}</h3>
<div className="flex items-center gap-4">
{track.categories.map((item: any, idx: number) => (
<p
key={item.category.id}
className="bg-secondary/25 border border-primary/10 rounded-lg px-3 py-2 text-sm w-fit cursor-default"
className="bg-secondary/25 border-primary/10 w-fit cursor-default rounded-lg border px-3 py-2 text-sm"
>
{item.category.category}{" "}
</p>
))}
</div>
</div>
<p className="md:text-lg tracking-tighter line-clamp-3 text-primary/60">{truncatedDescription}</p>
<p className="text-primary/60 line-clamp-3 tracking-tighter md:text-lg">{truncatedDescription}</p>
</div>
<div className="flex flex-col gap-4 w-full">
<div className="flex gap-2 items-center">
<p className="flex tracking-tighter gap-2 text-primary text-lg md:text-xl font-semibold">
<div className="flex w-full flex-col gap-4">
<div className="flex items-center gap-2">
<p className="text-primary flex gap-2 text-lg font-semibold tracking-tighter md:text-xl">
{track.problems.length} Chapters
</p>
<p className="flex tracking-tight gap-2 text-primary/60 md:text-lg">
<p className="text-primary/60 flex gap-2 tracking-tight md:text-lg">
{formatDistanceToNow(new Date(track.createdAt), { addSuffix: true })}
</p>
</div>
<div className="max-h-[25vh] overflow-y-auto flex flex-col gap-3 w-full py-2">
<div className="flex max-h-[25vh] w-full flex-col gap-3 overflow-y-auto py-2">
{track.problems.map((topic: any, idx: number) => (
<Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
<div className="cursor-pointer hover:-translate-y-1 flex items-center justify-between bg-primary/5 rounded-lg px-4 py-3 hover:bg-primary/10 transition-all duration-300 scroll-smooth w-full">
<div className="bg-primary/5 hover:bg-primary/10 flex w-full cursor-pointer items-center justify-between scroll-smooth rounded-lg px-4 py-3 transition-all duration-300 hover:-translate-y-1">
{topic.title}
<ArrowRight className="size-4" />
</div>
Expand All @@ -82,7 +82,7 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
<Link href={track.problems.length ? `/tracks/${track.id}/${track.problems[0]?.id}` : ""}>
<Button
size={"lg"}
className="flex items-center justify-center bg-blue-600 text-white hover:bg-blue-500 transition-all duration-300"
className="flex items-center justify-center bg-blue-600 text-white transition-all duration-300 hover:bg-blue-500"
onClick={(e) => e.stopPropagation()}
>
Start
Expand Down