Conversion to Tailwind and thec3.uk design

thec3uk · Aug 7, 2022 · 1f4cfd5 · 1f4cfd5
1 parent 9130018
commit 1f4cfd5
Show file tree

Hide file tree

Showing 106 changed files with 35,288 additions and 2,913 deletions.
diff --git a/app/components/AdditionalResources/index.tsx b/app/components/AdditionalResources/index.tsx
@@ -1,32 +1,25 @@
-import { Box, Heading, List, ListItem } from '@chakra-ui/react';
-import { Resource } from '~/routes/series/series.types';
+import { Resource } from "~/routes/series/series.types";
+import { layout } from "../components";
 
-export function AdditionalResources({
-	resources,
-}: {
-	resources?: Array<Resource>;
-}) {
-	return resources ? (
-		<Box p={10} w={'100%'}>
-			<Heading as="h2" size={'md'}>
-				Additional Resources
-			</Heading>
-			<Box paddingTop={2}>
-				<List>
-					{resources?.map(resource => (
-						<ListItem key={resource.title}>
-							<a href={resource.url} target={'_blank'}>
-								{resource.title}{' '}
-								{resource.description && (
-									<span> - {resource.description}</span>
-								)}
-							</a>
-						</ListItem>
-					))}
-				</List>
-			</Box>
-		</Box>
-	) : (
-		<></>
-	);
+export function AdditionalResources({ resources }: { resources?: Array<Resource> }) {
+  return resources ? (
+    <layout.Main hash="additional-resources">
+      <div className="prose">
+        <h2 className="text-lg">Additional Resources</h2>
+        <div className="pt-2">
+          <ul>
+            {resources?.map((resource) => (
+              <li key={resource.title}>
+                <a href={resource.url} target="_blank">
+                  {resource.title} {resource.description && <span> - {resource.description}</span>}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </layout.Main>
+  ) : (
+    <></>
+  );
 }
diff --git a/app/components/Channels/index.tsx b/app/components/Channels/index.tsx
@@ -1,24 +1,18 @@
-import { Channel } from '~/routes/channels/channels.types';
-import { ImageGrid } from '../ImageGrid';
-import { Theme } from '../ImageGrid/imageGrid.types';
+import { Channel } from "~/routes/channels/channels.types";
+import { ImageGrid } from "../ImageGrid";
+import { Theme } from "../ImageGrid/imageGrid.types";
 
-export function Channels({
-	channels,
-	theme,
-}: {
-	channels: Array<Channel>;
-	theme: Theme;
-}) {
-	return (
-		<ImageGrid
-			theme={theme}
-			title="Browse Channels"
-			items={channels.map(channel => ({
-				key: channel.uid,
-				link: `/channels/${channel.uid}`,
-				title: channel.name,
-				thumbnail: channel.thumbnail?.url,
-			}))}
-		/>
-	);
+export function Channels({ channels, theme }: { channels: Array<Channel>; theme: Theme }) {
+  return (
+    <ImageGrid
+      theme={theme}
+      title="Channel"
+      items={channels.map((channel) => ({
+        key: channel.uid,
+        link: `/channels/${channel.uid}`,
+        title: channel.name,
+        thumbnail: channel.thumbnail?.url,
+      }))}
+    />
+  );
 }
diff --git a/app/components/FeaturedChannel/index.tsx b/app/components/FeaturedChannel/index.tsx
@@ -1,28 +1,25 @@
-import { Box, HStack, Text, Image } from '@chakra-ui/react';
-import YouTubePlayer from 'react-player/youtube';
-import { Channel } from '~/routes/channels/channels.types';
-import { VideoBanner } from '../VideoBanner/videoBanner';
+import YouTubePlayer from "react-player/youtube";
+import { Channel } from "~/routes/channels/channels.types";
+import { VideoBanner } from "../VideoBanner/videoBanner";
 
-export function FeaturedChannel({
-	channel,
-	video,
-}: {
-	channel: Channel;
-	video: string | undefined;
-}) {
-	return (
-		<Box p={10} w={'100%'} bg={'gray.300'}>
-			<HStack>
-				<Box boxShadow="0px 0px 5px 1px grey">
-					<YouTubePlayer url={video} />
-				</Box>
-				<Text p={4}>{channel.description}</Text>
-				<Image
-					src={channel.thumbnail?.url}
-					w={'128px'}
-					borderRadius={'full'}
-				/>
-			</HStack>
-		</Box>
-	);
+import { PrismicRichText } from "@prismicio/react";
+import { Speaker } from "~/routes/speakers/speakers.types";
+import { layout, components } from "../components";
+
+export function FeaturedChannel({ channel, video }: { channel: Channel; video: string | undefined }) {
+  // fallback with an image?
+  const background = <YouTubePlayer url={video} />;
+  return (
+    <layout.Hero background={background}>
+      <img src={channel.thumbnail?.url} className="w-20 rounded-full" />
+      <h1 className="font-title font-bold text-5.5xl lowercase">{channel.name}</h1>
+      {/* <div className="mt-2 font-sans text-3xl">
+        <PrismicRichText field={speaker.role} />
+      </div> */}
+      <div className="px-2 py-2 mt-8 -mx-2 text-2xl">
+        <PrismicRichText field={channel.description} />
+      </div>
+      <div className="flex flex-col mt-8 space-y-4 text-2xl"></div>
+    </layout.Hero>
+  );
 }
diff --git a/app/components/Footer/index.tsx b/app/components/Footer/index.tsx
diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
diff --git a/app/components/ImageBox/index.tsx b/app/components/ImageBox/index.tsx
diff --git a/app/components/ImageGrid/imageGrid.types.ts b/app/components/ImageGrid/imageGrid.types.ts
@@ -1,13 +1,16 @@
+import { Channel } from "~/routes/channels/channels.types";
+
 export interface IImageBoxProps {
-	key: string;
-	link: string;
-	title: string;
-	thumbnail?: string;
-	subTitle?: string;
-	trailer?: string;
+  key: string;
+  link: string;
+  title: string;
+  thumbnail?: string;
+  subTitle?: string;
+  trailer?: string;
+  channel?: Channel;
 }
 
 export enum Theme {
-	light,
-	dark,
+  light,
+  dark,
 }
diff --git a/app/components/ImageGrid/index.tsx b/app/components/ImageGrid/index.tsx
@@ -1,47 +1,31 @@
-import { Box, Button, Center, Heading, SimpleGrid } from '@chakra-ui/react';
-import { Link } from 'remix';
-import { ImageBox } from '../ImageBox';
-import { IImageBoxProps, Theme } from './imageGrid.types';
+import { Link } from "remix";
+import { components, layout } from "../components";
+
+import { IImageBoxProps, Theme } from "./imageGrid.types";
 
 export function ImageGrid({
-	title,
-	items,
-	theme = Theme.light,
-	link,
+  title,
+  items,
+  theme = Theme.light,
+  link,
 }: {
-	title: string;
-	items: Array<IImageBoxProps>;
-	theme?: Theme;
-	link?: {
-		label: string;
-		url: string;
-	};
+  title: string;
+  items: Array<IImageBoxProps>;
+  theme?: Theme;
+  link?: {
+    label: string;
+    url: string;
+  };
 }) {
-	return (
-		<Box p={10} w={'100%'} bg={theme === Theme.dark ? 'gray.300' : 'white'}>
-			<Heading as="h3" size={'md'} mb={2}>
-				{title}
-			</Heading>
-			<SimpleGrid minChildWidth={'256px'} spacing="40px">
-				{items.map((box, idx) => {
-					return (
-						<ImageBox
-							key={box.key + idx}
-							box={box}
-							theme={theme}
-						></ImageBox>
-					);
-				})}
-			</SimpleGrid>
-			<Center pt={5}>
-				{link && (
-					<Link to={link.url}>
-						<Button borderRadius={'lg'} fontWeight={'400'}>
-							{link.label}
-						</Button>
-					</Link>
-				)}
-			</Center>
-		</Box>
-	);
+  return (
+    <>
+      {items.map((box, idx) => {
+        return (
+          <layout.Main hash={box.key + idx} key={box.key + idx}>
+            <components.ImageCard title={title} subtitle={box.title} image={box.thumbnail as string} link={box.link} />
+          </layout.Main>
+        );
+      })}
+    </>
+  );
 }