make class colors

Author: dtemkin1

package.json

@@ -40,7 +40,7 @@
 	"engines": {
 		"node": ">=18"
 	},
-	"packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab",
+	"packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
 		"@pandacss/dev": "^0.51.1",
@@ -54,7 +54,7 @@
 		"postcss": "^8.5.1",
 		"solid-devtools": "^0.33.0",
 		"typescript": "^5.7.3",
-		"vite": "^5.4.11",
+		"vite": "^5.4.12",
 		"vitest": "^3.0.2"
 	},
 	"bugs": {

pnpm-lock.yaml

@@ -1,14 +1,51 @@
-import type { Component } from "solid-js";
+import { type Component, Show, createMemo } from "solid-js";
 
-import type { Subject } from "~/context/types";
+import { courseColor, getColorClass } from "~/lib/colors";
+
+import { Box } from "styled-system/jsx";
+import { Card } from "~/components/ui/card";
+import { Text } from "~/components/ui/text";
+
+import type { SelectedSubjects } from "~/context/types";
+import { Button } from "./ui/button";
 
 const Class: Component<{
 	classIndex: number;
-	classInfo: "placeholder" | Subject;
+	classInfo: "placeholder" | SelectedSubjects;
 	semesterIndex: number;
-	// warnings: string[];
+	warnings: string[];
 }> = (props) => {
-	return <div />;
+	const classInfo = createMemo(() => {
+		if (props.classInfo === "placeholder") {
+			return undefined;
+		}
+		return props.classInfo;
+	});
+
+	return (
+		<Show when={classInfo()} fallback={"placeholder"}>
+			{(shownClassInfo) => (
+				<Button
+					width="48"
+					height="24"
+					variant="solid"
+					overflowY="hidden"
+					textWrap="wrap"
+					className={getColorClass(courseColor(shownClassInfo()))}
+				>
+					<Text>
+						<Text as="span" fontWeight="bold">
+							{shownClassInfo().subject_id}{" "}
+						</Text>
+
+						<Text as="span" fontWeight="medium">
+							{shownClassInfo().title}
+						</Text>
+					</Text>
+				</Button>
+			)}
+		</Show>
+	);
 };
 
 export default Class;

src/components/Class.tsx

@@ -131,6 +131,11 @@ const Semester: Component<{
 		};
 	});
 
+	// TODO: implement warnings
+	const warnings = createMemo(() => {
+		return [] as string[][];
+	});
+
 	return (
 		<Accordion.Item
 			value={props.index.toString()}
@@ -163,7 +168,7 @@ const Semester: Component<{
 						<Class
 							classInfo={subj}
 							semesterIndex={props.index}
-							// warnings={warnings()[props.index]}
+							warnings={warnings()[props.index]}
 							classIndex={index()}
 						/>
 					)}

src/components/Semester.tsx

@@ -0,0 +1 @@
+export * as Card from './styled/card'

src/components/ui/card.tsx

@@ -0,0 +1,38 @@
+import { type Assign, type PolymorphicProps, ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { card } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(card)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'root',
+)
+
+export const Body = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'body',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'description',
+)
+
+export const Footer = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'footer',
+)
+
+export const Header = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'header',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'h3'>, PolymorphicProps<'h3'>>>(
+  ark.h3,
+  'title',
+)

src/components/ui/styled/card.tsx

@@ -113,7 +113,8 @@ const CourseDataProvider: ParentComponent = (props) => {
 			setStore(
 				"roads",
 				produce((roads) => {
-					delete roads[id];
+					// biome-ignore lint/style/noNonNullAssertion: <explanation>
+					roads[id] = undefined!;
 				}),
 			);
 		},
@@ -422,7 +423,9 @@ const CourseDataProvider: ParentComponent = (props) => {
 		},
 
 		getRoadKeys: () => {
-			return Object.getOwnPropertyNames(store.roads);
+			return Object.getOwnPropertyNames(store.roads).filter(
+				(key) => store.roads[key] !== undefined,
+			);
 		},
 
 		getMatchingAttributes: (gir, hass, ci) => {