(launcher/home): create news section

lilithmod · Aug 6, 2022 · 2e01f86 · 2e01f86
1 parent 4196594
commit 2e01f86
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/build/bin/Lilith Launcher.app/Contents/MacOS/Lilith Launcher b/build/bin/Lilith Launcher.app/Contents/MacOS/Lilith Launcher
diff --git a/frontend/src/components/pages/Launcher/LauncherHome.tsx b/frontend/src/components/pages/Launcher/LauncherHome.tsx
@@ -8,6 +8,42 @@ import { Dialog, Menu, Transition } from '@headlessui/react';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { PageContentBlock, Spinner } from '@/components/elements/Generic';
 
+const posts = [
+	{
+		title: 'Example Post',
+		href: '#',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+		imageUrl: 'https://source.boringavatars.com/marble/512/?square',
+		author: {
+			name: 'Some Author',
+			imageUrl: 'https://source.boringavatars.com/beam/512/?square',
+		},
+	},
+	{
+		title: 'Example Post',
+		href: '#',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+		imageUrl: 'https://source.boringavatars.com/marble/512/?square',
+		author: {
+			name: 'Some Author',
+			imageUrl: 'https://source.boringavatars.com/beam/512/?square',
+		},
+	},
+	{
+		title: 'Example Post',
+		href: '#',
+		description:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+		imageUrl: 'https://source.boringavatars.com/marble/512/?square',
+		author: {
+			name: 'Some Author',
+			imageUrl: 'https://source.boringavatars.com/beam/512/?square',
+		},
+	},
+];
+
 const Base = (props: { id: string }) => {
 	return (
 		<PageContentBlock pageId={props.id}>
@@ -22,6 +58,34 @@ const Base = (props: { id: string }) => {
 					</button>
 				</div>
 			</div>
+			<div className="relative max-w-7xl mx-auto mb-5">
+				<div className="text-center">
+					<h2 className="py-2.5 text-neutral-200 text-lg font-semibold">Recent News</h2>
+				</div>
+				<div className="mx-6 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
+					{posts.map((post) => (
+						<a href={post.href} className="block">
+							<div key={post.title} className="flex flex-col rounded-lg shadow-lg overflow-hidden">
+								<div className="flex-shrink-0">
+									<img className="h-36 w-full object-cover" src={post.imageUrl} alt="" />
+								</div>
+								<div className="flex-1 bg-neutral-800 p-4 flex flex-col justify-between">
+									<p className="text-sm text-neutral-400 -mt-1">{post.description}</p>
+									<div className="mt-3 flex items-center">
+										<div className="flex-shrink-0">
+											<span className="sr-only">{post.author.name}</span>
+											<img className="h-5 w-5 rounded" src={post.author.imageUrl} alt="" />
+										</div>
+										<div className="ml-2">
+											<p className="text-sm font-medium text-neutral-500">{post.author.name}</p>
+										</div>
+									</div>
+								</div>
+							</div>
+						</a>
+					))}
+				</div>
+			</div>
 		</PageContentBlock>
 	);
 };