feat: recently viewed

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>
   );