Skip to content

Commit

Permalink
fix: bandaid for training index being fucked
Browse files Browse the repository at this point in the history 
this is just a port of the changes from protein filled dinner
  • Loading branch information
@Gobot1234
Gobot1234 committed Sep 24, 2024
1 parent f25dd85 commit b43daa9
Show file tree
Hide file tree
Showing 6 changed files with 185 additions and 97 deletions.
48 changes: 16 additions & 32 deletions apps/forge/src/routes/training/-components/IndexCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,28 @@
import ImageGradient from "@/components/training/ImageGradient.tsx";
import { Link } from "@tanstack/react-router";
import { cn } from "@/lib/utils";
import React from "react";

interface IndexCardProps {
to?: string;
imageSrc: string;
imageAlt: string;
title: string;
img: React.ReactElement;
title: React.ReactElement;
description: string;
onClick?: () => void;
gradientColor: string;
className?: string;
}

const IndexCard: React.FC<IndexCardProps> = ({
to,
imageSrc,
imageAlt,
title,
description,
onClick,
gradientColor,
}) => {
const CardContent = () => (
<div className="group relative w-full max-w-lg cursor-pointer overflow-hidden rounded-lg shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg">
<ImageGradient imageSrc={imageSrc} imageAlt={imageAlt} gradientColor={gradientColor} />
<div className="absolute bottom-0 left-0 right-0 px-6 pb-14">
const IndexCard: React.FC<IndexCardProps> = ({ img, title, description, className }) => {
return (
<div
className={cn(
"group relative w-full max-w-lg cursor-pointer overflow-hidden rounded-lg shadow-md transition-all duration-300 hover:scale-105 hover:shadow-lg",
className,
)}
>
{img}
<div className="absolute bottom-0 left-0 right-0 px-6 pb-12">
<h3 className="text-xl font-bold text-white">{title}</h3>
<p className="mt-2 text-sm text-gray-300">{description}</p>
<p className="mt-2 text-sm text-gray-200">{description}</p>
</div>
</div>
);

return to ? (
<Link to={to}>
<CardContent />
</Link>
) : (
<div onClick={onClick} onKeyDown={onClick} role="button" tabIndex={0}>
<CardContent />
</div>
);
};

export default IndexCard;
234 changes: 169 additions & 65 deletions apps/forge/src/routes/training/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,194 @@
import { GeorgePorterIcon, HeartspaceIcon, LocationIcon, MainspaceIcon } from "@/components/icons/Locations";
import Title from "@/components/title";
import ImageGradient from "@/components/training/ImageGradient";
import { useUser } from "@/lib/utils";
import IndexCard from "@/routes/training/-components/IndexCard.tsx";
import { createFileRoute } from "@tanstack/react-router";
import { training } from "@ignis/types";
import { Link, createFileRoute } from "@tanstack/react-router";
import { Button } from "@ui/components/ui/button";
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@ui/components/ui/command";
import { Separator } from "@ui/components/ui/separator";

const handleNavigation = (url: string) => {
window.location.href = url;
};
import { SearchCheckIcon, TriangleAlertIcon } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { TrainingContent } from "../_authenticated/training/$id";

export default function TrainingIndexPage() {
const user = useUser();
const [hidden, setHidden] = useState(true);
const commandRef = useRef<HTMLDivElement>(null);

const handleClickOutside = (event: MouseEvent) => {
if (commandRef.current && !commandRef.current.contains(event.target as Node)) {
setHidden(true);
}
};

useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

return (
<>
<Title prompt="Training" />
<div className="p-4 mt-1">
<div className="text-center mb-8">
<h1 className="text-4xl font-bold tracking-wide sm:text-5xl md:text-6xl">
Welcome to the iForge's User Training
</h1>
</div>
<h1 className="text-4xl font-bold font-futura sm:text-5xl md:text-6xl text-center">
Welcome to the iForge's User Training
</h1>
<Separator className="my-6" />
<div className="mb-8">
<h2 className="text-2xl font-semibold text-center mb-4">Search for a course</h2>
<div className="relative w-3/4 mx-auto">
<input
placeholder="Enter all or part of a course name..."
className="border-2 bg-inherit border-gray-300 rounded-md py-2 px-4 w-full ring-offset-background placeholder:text-muted-foreground outline-primary"
/>
<Button className="absolute top-0 right-0 m-0.5">Search</Button>
</div>
<h3 className="text-2xl font-semibold text-center mb-4">Search for a course</h3>
<Command
ref={commandRef}
className="flex justify-center w-3/4 mx-auto max-w-[720px]"
onFocus={() => setHidden(false)}
>
<CommandInput placeholder="Enter all or part of a course name..." />
<CommandList hidden={hidden}>
<CommandEmpty>No results found :(</CommandEmpty>
{[].map((training) => (
<CommandItem value={training.name} className="flex justify-between" key={training.id}>
<Link to="/training/$id" params={training}>
<div className="flex gap-3 justify-center items-center">
{training.locations.map((location) => (
<LocationIcon key={location} location={location as training.Location} />
))}
<div className="flex-col">
<div className="font-semibold">{training.name}</div>
<TrainingContent content={training.description} className="text-sm flex" />
</div>
</div>
</Link>
{user?.roles.some((role) => role.name === "Rep") && (
<Link to="/training/$id" params={training.rep} key={training.rep.id}>
<Button size="sm" className="text-sm" variant="info">
Rep Training
</Button>
</Link>
)}
</CommandItem>
))}
</CommandList>
</Command>
</div>
<h4 className="text-3xl font-semibold mb-4 text-center">Locations</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center mx-auto">
<div className="w-full">
<IndexCard
to="/training/locations/mainspace"
imageSrc={`${import.meta.env.VITE_CDN_URL}/files/mainspace_training.jpg`}
imageAlt="iForge Mainspace"
title="iForge Mainspace"
<h2 className="text-4xl font-semibold font-futura mb-4 text-center">Locations</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center mx-auto min-h-72 max-w-[1440px]">
<div className="w-full max-h-72">
<Link to="/training/locations/mainspace">
<IndexCard
img={
<ImageGradient gradientColor="mainspace">
{/* TODO this doesn't cover the entirety of the box for some reason in lg */}
<img
src={`${import.meta.env.VITE_CDN_URL}/files/mainspace_training.jpg`}
alt="iForge Mainspace"
className="w-full object-fill"
/>
</ImageGradient>
}
title={
<span className="flex gap-2 items-center">
<MainspaceIcon className="stroke-white" tooltip={false} />
Mainspace
</span>
}
description="Training for the iForge Mainspace located in the Diamond."
gradientColor="mainspace"
/>
className="h-full"
/>
</Link>
</div>
<div className="w-full">
<IndexCard
to="/training/locations/heartspace"
imageSrc="/placeholder.svg"
imageAlt="iForge Heartspace"
title="iForge Heartspace"
<div className="w-full max-h-72">
<Link to="/training/locations/heartspace">
<IndexCard
img={
<ImageGradient gradientColor="heartspace">
<img
src={`${import.meta.env.VITE_CDN_URL}/files/heartspace_training.jpg`}
alt="iForge Heartspace"
className="w-full object-fill"
/>
</ImageGradient>
}
title={
<span className="flex gap-2 items-center">
<HeartspaceIcon className="stroke-white" tooltip={false} />
Heartspace
</span>
}
description="Training for the iForge Mainspace located in the Heartspace."
gradientColor="heartspace"
/>
className="h-full"
/>
</Link>
</div>
<div className="w-full">
<IndexCard
onClick={() =>
handleNavigation("https://training.iforge.shef.ac.uk/subject-areas/george-porter-cca-rep/online")
<div className="w-full max-h-72">
<Link to="/training/locations/george-porter">
<IndexCard
img={
<ImageGradient gradientColor="george-porter">
<img
src={`${import.meta.env.VITE_CDN_URL}/files/george_porter_training.jpg`}
alt="George Porter"
className="w-full object-fill"
/>
</ImageGradient>
}
imageSrc="/placeholder.svg"
imageAlt="George Porter CCA Workshop"
title="George Porter CCA Workshop"
description="Training appropriate for CCA members looking to gain access to the iTec and its training."
gradientColor="george-porter"
/>
title={
<span className="flex gap-2 items-center">
<GeorgePorterIcon className="stroke-white" tooltip={false} />
George Porter
</span>
}
description="Training appropriate for CCA members looking to gain access to the George Porter building and its training."
className="h-full"
/>
</Link>
</div>
</div>
<Separator className="mt-5"/>
<h3 className="text-2xl font-semibold text-center m-4">Useful links</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6 justify-items-center mx-auto">
<div className="w-full max-w-sm">
<IndexCard
to="/training/approved-materials"
imageSrc="/placeholder.svg"
imageAlt="Approved materials"
title="Approved Materials"
<Separator className="my-6" />
<h2 className="text-4xl font-semibold font-futura text-center m-4">Useful Links</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 justify-items-center mx-auto min-h-72 max-w-[1440px]">
<div className="flex w-full max-h-80 justify-items-center">
<Link to="/training/approved-materials">
<IndexCard
img={
<ImageGradient gradientColor="tick">
<img
src={`${import.meta.env.VITE_CDN_URL}/files/approved_materials.jpg`}
alt="Approved materials"
/>
</ImageGradient>
}
title={
<span className="flex gap-2 items-center">
<SearchCheckIcon />
Approved Materials
</span>
}
description="COSHH regulations for materials in the iForge."
gradientColor="muted"
/>
className="h-full w-full"
/>
</Link>
</div>
<div className="w-full max-w-sm">
<IndexCard
to="/training/risk-assessments"
imageSrc="/placeholder.svg"
imageAlt="iForge Risk Assessment"
title="iForge Risk Assessment"
<div className="w-full max-h-80">
<Link to="/training/risk-assessments">
<IndexCard
img={
<ImageGradient gradientColor="cross">
<img src={`${import.meta.env.VITE_CDN_URL}/files/risk_assessments.jpg`} alt="Risk Assessment" />
</ImageGradient>
}
title={
<span className="flex gap-2 items-center">
<TriangleAlertIcon />
Risk Assessment
</span>
}
description="The various risk assessments for the spaces."
gradientColor="muted"
/>
className="h-full w-full"
/>
</Link>
</div>
</div>
</div>
Expand Down
Binary file added apps/mine/files/approved_materials.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/mine/files/george_porter_training.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/mine/files/heartspace_training.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/mine/files/risk_assessments.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b43daa9

Please sign in to comment.