moving in on recommendations

charliewilco · Sep 5, 2022 · c97b8e0 · c97b8e0 · vercel · Sep 5, 2022
1 parent e3875bc
commit c97b8e0
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 30 deletions.
diff --git a/components/app-header.tsx b/components/app-header.tsx
@@ -7,7 +7,7 @@ interface AppHeaderProps {
 
 export const AppHeader = (props: AppHeaderProps) => {
  return (
- <header className="w-full border-b border-zinc-700 px-4">
+ <header className="w-full border-b border-zinc-200 px-4 dark:border-zinc-700">
  <div className="flex items-center">
  <Logo />
  <h1 className="ml-4">{props.title}</h1>

diff --git a/components/entries-list.tsx b/components/entries-list.tsx
@@ -34,8 +34,8 @@ export const EntryListItem = (props: EntryListItemProps) => {
  return (
  <li
  className={classNames(
- "cursor-pointer border-b border-zinc-700 p-2",
- props.isSelected && "bg-blue-500 text-white",
+ "cursor-pointer border-b border-zinc-200 p-2 dark:border-zinc-700",
+ props.isSelected && "bg-sky-600/50 text-white",
  !props.isUnread && "opacity-50"
  )}
  onClick={handleSelect}>

diff --git a/components/logo.tsx b/components/logo.tsx
@@ -11,15 +11,15 @@ export const Logo = () => {
  fillRule="evenodd"
  clipRule="evenodd"
  d="M1.12542 6.83245C-1.33382 4.25504 0.505064 0 4.05476 0H27.3155C29.8944 0 32.2314 1.51874 33.2788 3.87533L43.1533 26.0931C43.1683 26.1267 43.182 26.1609 43.1946 26.1956C44.0833 28.6528 44.7856 31.7459 43.379 34.2765C41.9036 36.9307 38.5797 38.2212 33.3459 38.2217H33.3434L33.3277 38.2217H26.7409C25.9856 38.2217 25.4867 37.3993 25.6488 36.6616C26.0374 34.8934 25.6328 32.9346 24.1762 31.3834L18.342 25.1704H18.408C16.9506 23.5746 14.9351 21.4125 12.6939 19.0294C8.78564 14.8737 4.28383 10.1426 1.12542 6.83245ZM8.85576 4.97192C8.0712 4.97192 7.63752 5.88194 8.13167 6.49132L10.5958 9.53012C11.1268 10.185 11.925 10.5653 12.7681 10.5653H28.3647C29.5688 10.5653 30.3153 9.25488 29.7012 8.21917L28.5882 6.34223C28.0845 5.49277 27.1702 4.97192 26.1826 4.97192H8.85576ZM17.0266 12.4298C15.8504 12.4298 15.22 13.8135 15.9918 14.7011C16.4537 15.2323 17.1231 15.5373 17.827 15.5373H25.671C26.583 15.5373 27.196 14.6023 26.8324 13.7659C26.4796 12.9546 25.6793 12.4298 24.7946 12.4298H17.0266ZM21.6815 17.4017C20.5068 17.4017 19.8762 18.7826 20.6456 19.6704C21.1073 20.2031 21.7776 20.5092 22.4826 20.5092H32.8207C33.7318 20.5092 34.3446 19.5758 33.9823 18.7398C33.6303 17.9275 32.8295 17.4017 31.9442 17.4017H21.6815Z"
- fill="white"
+ fill="currentColor"
  />
  <path
  d="M14.3755 25.4858C14.1865 25.2845 13.9227 25.1704 13.6465 25.1704H7.78918C7.58113 25.1589 7.36612 25.1595 7.14385 25.1734C7.05679 25.1788 6.97034 25.1916 6.88541 25.2115C6.46696 25.3099 6.00778 25.4869 5.562 25.7562C4.79101 26.2219 5.45292 27.2446 6.32778 27.459C7.17339 27.6662 8.00697 28.1027 8.7756 28.7291C10.2905 29.9638 11.6657 32.001 12.7364 34.8841C13.1906 36.1073 14.3673 36.9895 15.9368 37.5608C17.1404 37.9989 18.3876 38.1813 19.2539 38.2217H19.8721C22.3216 38.2217 23.5876 35.2961 21.9109 33.5105L14.3755 25.4858Z"
- fill="white"
+ fill="currentColor"
  />
  <path
  d="M3.96478 32.9376C4.21215 33.5632 4.53298 34.2186 4.93079 34.9037C5.61164 36.3462 7.53103 39.4974 9.79964 43.0862C12.1366 46.7832 14.9243 51.0682 17.3324 54.728C19.0106 57.2786 22.9043 55.6755 22.4047 52.7253L20.5511 41.7787C20.5072 41.5191 20.2823 41.3292 20.019 41.3292C19.7757 41.3405 19.4975 41.3412 19.1922 41.3291H18.7383V41.3029C17.6181 41.2185 16.2277 40.9736 14.874 40.4809C12.9272 39.7723 10.7375 38.4275 9.82332 35.9659C8.87451 33.411 7.76391 31.9134 6.81243 31.1379C5.865 30.3658 5.19059 30.3766 4.86629 30.4869C4.54677 30.5955 4.13236 30.9461 3.9838 31.8016C3.92847 32.1203 3.91493 32.5012 3.96478 32.9376Z"
- fill="white"
+ fill="currentColor"
  />
  </svg>
  );

diff --git a/components/side-navigation.tsx b/components/side-navigation.tsx
@@ -19,7 +19,7 @@ export const LinkItem = (props: LinkItemProps) => {
  <Link
  key={props.name}
  href={props.href}
- className="flex items-center rounded-lg p-2 text-zinc-200 hover:bg-sky-700">
+ className="flex items-center rounded-lg p-2 text-zinc-700 hover:bg-sky-700 dark:text-zinc-200">
  {props.children}
  <span className="sr-only">{props.name}</span>
  </Link>

diff --git a/components/ui/recommendation-card.tsx b/components/ui/recommendation-card.tsx
@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+import { FiRss } from "react-icons/fi";
+import { addFeed } from "../../lib/fetcher";
+
+interface RecommendationCardProps {
+ displayName: string;
+ link: string;
+ type?: "feed" | "twitter";
+}
+
+export const RecommendationCard = ({ displayName, link }: RecommendationCardProps) => {
+ const handleClick = useCallback(() => {
+ return addFeed(link);
+ }, [link]);
+
+ return (
+ <div className="divide-y divide-zinc-500 rounded-lg bg-white dark:bg-zinc-800">
+ <div className="flex w-full items-center justify-between space-x-6 p-6">
+ <div className="flex-1 truncate">
+ <div className="flex items-center space-x-3">
+ <h3 className="truncate text-sm font-medium">{displayName}</h3>
+ </div>
+ <p className="mt-1 truncate text-sm text-zinc-500">{link}</p>
+ </div>
+ </div>
+ <div>
+ <div className="-mt-px flex divide-x divide-zinc-500">
+ <div className="flex w-0 flex-1">
+ <button
+ onClick={handleClick}
+ className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium hover:text-gray-500">
+ <FiRss className="h-5 w-5 text-zinc-400" aria-hidden="true" />
+ <span className="ml-3">Subscribe</span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+};
diff --git a/pages/dashboard/all.tsx b/pages/dashboard/all.tsx
@@ -31,15 +31,15 @@ export default function AllEntries() {
  </div>
  </div>
  <main className="grid flex-1 grid-cols-12">
- <aside className="col-span-2 overflow-y-scroll border-r border-zinc-700">
+ <aside className="col-span-2 overflow-y-scroll border-r border-zinc-200 dark:border-zinc-700">
  <div className="relative h-full bg-zinc-900">
  <FeedList selected={feed} onSelect={selectFeed} />
  <div className="absolute bottom-0 left-0 right-0 flex w-full items-center bg-red-500/50 p-2">
  <AddFeed />
  </div>
  </div>
  </aside>
- <aside className="col-span-3 overflow-y-scroll border-r border-zinc-700">
+ <aside className="col-span-3 overflow-y-scroll border-r border-zinc-200 dark:border-zinc-700">
  <div className="relative bg-zinc-900">
  {feed !== null && (
  <EntryList feedID={feed} selected={entry} onSelect={selectEntry} />

diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
@@ -16,9 +16,9 @@ export default function UnreadEntries() {
  <title>Unread | Reubin</title>
  </Head>
  <div className="flex h-screen flex-col">
- <AppHeader title="All Entries" />
+ <AppHeader title="Unread Entries" />
  <div className="flex flex-1">
- <div className="flex h-full flex-col justify-between border-r border-zinc-700">
+ <div className="flex h-full flex-col justify-between border-r border-zinc-200 dark:border-zinc-700">
  <div>
  <SideNavigation />
  </div>
@@ -32,24 +32,24 @@ export default function UnreadEntries() {
  </div>
  </div>
  <main className="grid flex-1 grid-cols-12">
- <aside className="col-span-2 overflow-y-scroll border-r border-zinc-700">
- <div className="relative h-full  bg-zinc-900">
+ <aside className="col-span-2 overflow-y-scroll border-r border-zinc-200 dark:border-zinc-700">
+ <div className="relative h-full dark:bg-zinc-900">
  <FeedList onSelect={selectFeed} selected={feed} />
  <div className="absolute bottom-0 left-0 right-0 flex w-full justify-center bg-red-500/50 p-2">
  <AddFeed />
  </div>
  </div>
  </aside>
- <aside className="col-span-3 overflow-y-scroll border-r border-zinc-700">
- <div className="relative bg-zinc-900">
+ <aside className="col-span-3 overflow-y-scroll border-r border-zinc-200 dark:border-zinc-700">
+ <div className="relative dark:bg-zinc-900">
  {feed !== null && (
  <EntryList feedID={feed} selected={entry} onSelect={selectEntry} />
  )}
  </div>
  </aside>
  <section
  aria-labelledby="primary-heading"
- className="col-span-7 h-full overflow-y-scroll bg-zinc-800">
+ className="col-span-7 h-full overflow-y-scroll dark:bg-zinc-800">
  <div className="relative">
  <h1 id="primary-heading" className="sr-only">
  Entry

diff --git a/pages/recommendations.tsx b/pages/recommendations.tsx
@@ -1,5 +1,6 @@
 import type { InferGetStaticPropsType, NextPage } from "next";
 import { RecommendedKeyArray } from "../server/recommended";
+import { RecommendationCard } from "../components/ui/recommendation-card";
 
 export const getStaticProps = async () => {
  return {
@@ -13,24 +14,22 @@ const RecommendationsPage: NextPage<InferGetStaticPropsType<typeof getStaticProp
  recommended,
 }) => {
  return (
- <div>
+ <div className="mx-auto max-w-7xl space-y-16 pt-16">
  {recommended.map(([key, recommendedFeeds], idx) => {
  return (
- <div key={idx}>
- <h2>{key}</h2>
+ <section key={idx}>
+ <h2 className="text-lg opacity-50">{key}</h2>
 
- <ul>
- {recommendedFeeds.map((r) => {
- return (
- <li key={r.displayName}>
- <h3>{r.displayName}</h3>
-
- <pre>{r.link}</pre>
- </li>
- );
- })}
+ <ul
+ role="list"
+ className="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+ {recommendedFeeds.map((r) => (
+ <li key={r.displayName} className="col-span-1">
+ <RecommendationCard displayName={r.displayName} link={r.link} />
+ </li>
+ ))}
  </ul>
- </div>
+ </section>
  );
  })}
  </div>