feat: recently viewed

packages/i18n/strings/en.json

@@ -65,5 +65,10 @@
   "navbar": {
     "home": "Home",
     "settings": "Settings"
+  },
+
+  "recent": {
+    "title": "Recent",
+    "no_recent": "Your recently viewed pages will appear here."
   }
 }

packages/website-ue/src/components/Heading/index.tsx

@@ -9,7 +9,7 @@ export interface HeadingProps extends Omit<TextProps, "size"> {
 export function Heading({
   className,
   weight,
-  size = "2",
+  size = "1",
   ...props
 }: HeadingProps) {
   return (

packages/website-ue/src/components/Navbar.astro

@@ -140,5 +140,19 @@ const strings = await api.strings(locale);
       </div>
       <Text lowContrast className="label">{strings.navbar.settings}</Text>
     </LinkI18n>
+
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
+      <div class="selector">
+        <GearIcon className="icon" />
+      </div>
+      <Text lowContrast className="label">{strings.navbar.settings}</Text>
+    </LinkI18n>
+
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
+      <div class="selector">
+        <GearIcon className="icon" />
+      </div>
+      <Text lowContrast className="label">{strings.navbar.settings}</Text>
+    </LinkI18n>
   </div>
 </div>

packages/website-ue/src/components/RecentItems/index.module.css

@@ -0,0 +1,9 @@
+.recent {
+  .list {
+    min-height: var(--space-7);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

packages/website-ue/src/components/RecentItems/index.tsx

@@ -0,0 +1,34 @@
+import { LocaleProvider } from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
+import { Heading } from "../Heading";
+import { Section } from "../Section";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  locale: string;
+  skeleton?: boolean;
+}
+
+export function RecentItems({ locale, skeleton }: Props) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content />
+    </LocaleProvider>
+  );
+}
+
+function Content() {
+  const strings = useStrings();
+  return (
+    <Section first className={styles.recent}>
+      <Heading size="3">{strings.recent.title}</Heading>
+
+      <div className={styles.list}>
+        <Text lowContrast size="minor">
+          {strings.recent.no_recent}
+        </Text>
+      </div>
+    </Section>
+  );
+}

packages/website-ue/src/components/Section/index.css

@@ -11,4 +11,8 @@
     flex-direction: column;
     gap: var(--space-4);
   }
+
+  &[data-first="true"] .content {
+    padding-top: var(--space-6);
+  }
 }

packages/website-ue/src/components/Section/index.tsx

@@ -2,13 +2,17 @@ import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
-export function Section({
-  className,
-  children,
-  ...props
-}: ComponentProps<"div">) {
+export interface SectionProps extends ComponentProps<"div"> {
+  first?: boolean;
+}
+
+export function Section({ className, children, ...props }: SectionProps) {
   return (
-    <div className={classNames("section", className)} {...props}>
+    <div
+      data-first={props.first}
+      className={classNames("section", className)}
+      {...props}
+    >
       <div className="content">{children}</div>
     </div>
   );

packages/website-ue/src/pages/[...locale]/index.astro

@@ -2,6 +2,7 @@
 import locales from "@blitzkit/i18n/locales.json";
 import type { GetStaticPaths } from "astro";
 import HomeHero from "../../components/HomeHero.astro";
+import { RecentItems } from "../../components/RecentItems";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 export const getStaticPaths = (() => {
@@ -18,4 +19,12 @@ const { locale } = Astro.props;
 
 <BaseLayout {locale} accent="amber">
   <HomeHero {locale} />
+
+  <RecentItems {locale} client:only="react">
+    <RecentItems {locale} skeleton slot="fallback" />
+  </RecentItems>
+
+  <!-- <Section>
+    {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
+  </Section> -->
 </BaseLayout>