diff --git a/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx b/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx index 7a297c5da7..8fd9f76509 100644 --- a/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx +++ b/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx @@ -2,7 +2,7 @@ import * as React from "react" -import { Button } from "@/registry/new-york-v4/ui/button" +import { cn } from "@/lib/utils" const THEME_OPTIONS = [ { label: "Taupe", value: "theme-taupe" }, @@ -54,21 +54,25 @@ export function ThemeSwitcher() { }, [theme]) return ( -
-
-
+
+
+
{THEME_OPTIONS.map((option) => ( - + ))}
diff --git a/apps/v4/app/(app)/(styles)/sera/page.tsx b/apps/v4/app/(app)/(styles)/sera/page.tsx index 28796e9b77..9896e62a1e 100644 --- a/apps/v4/app/(app)/(styles)/sera/page.tsx +++ b/apps/v4/app/(app)/(styles)/sera/page.tsx @@ -13,8 +13,6 @@ import { ThemeSwitcher } from "./components/theme-switcher" import { Preview01 } from "./preview-01" import { Preview02 } from "./preview-02" import { Preview03 } from "./preview-03" -import { Preview04 } from "./preview-04" -import { Preview05 } from "./preview-05" import "./style.css" @@ -66,8 +64,6 @@ export default function SeraPage() { - -
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx index 94f3da8db9..ec3cc7882a 100644 --- a/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx +++ b/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx @@ -1,10 +1,27 @@ "use client" -import * as React from "react" -import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react" +import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react" import { cn } from "@/lib/utils" -import { Button } from "@/styles/base-sera/ui/button" +import { Badge } from "@/styles/base-sera/ui/badge" +import { + Card, + CardContent, + CardFooter, + CardHeader, +} from "@/styles/base-sera/ui/card" +import { + InputGroup, + InputGroupAddon, + InputGroupInput, +} from "@/styles/base-sera/ui/input-group" +import { + Pagination, + PaginationContent, + PaginationItem, + PaginationLink, +} from "@/styles/base-sera/ui/pagination" +import { Progress, ProgressValue } from "@/styles/base-sera/ui/progress" import { Table, TableBody, @@ -14,20 +31,7 @@ import { TableRow, } from "@/styles/base-sera/ui/table" -type ArticleStatus = "in-revision" | "final-edit" | "drafting" | "published" - -type ArticleRow = { - title: string - wordProgress: string - author: string - issue: string - status: ArticleStatus - statusLabel: string - progress: number - progressClassName: string -} - -const ARTICLE_ROWS: ArticleRow[] = [ +const ARTICLE_ROWS = [ { title: "The Future of Sustainable Architecture", wordProgress: "1.4k / 2.6k words", @@ -36,7 +40,6 @@ const ARTICLE_ROWS: ArticleRow[] = [ status: "in-revision", statusLabel: "In revision", progress: 45, - progressClassName: "w-[45%]", }, { title: "Brutalism's Second Act", @@ -46,7 +49,6 @@ const ARTICLE_ROWS: ArticleRow[] = [ status: "final-edit", statusLabel: "Final edit", progress: 90, - progressClassName: "w-[90%]", }, { title: "The Typography of Public Spaces", @@ -56,7 +58,6 @@ const ARTICLE_ROWS: ArticleRow[] = [ status: "drafting", statusLabel: "Drafting", progress: 20, - progressClassName: "w-[20%]", }, { title: "Rethinking Urban Canopies", @@ -66,231 +67,150 @@ const ARTICLE_ROWS: ArticleRow[] = [ status: "published", statusLabel: "Published", progress: 100, - progressClassName: "w-full", }, -] + { + title: "Light, Glass, and the Modern Museum", + wordProgress: "1.2k / 2.0k words", + author: "Amara Osei", + issue: "Autumn 2024", + status: "in-revision", + statusLabel: "In revision", + progress: 55, + }, + { + title: "Concrete Utopias: Housing in the 21st Century", + wordProgress: "3.0k / 3.0k words", + author: "Tomás Herrera", + issue: "Summer 2024", + status: "published", + statusLabel: "Published", + progress: 100, + }, + { + title: "Designing for Silence", + wordProgress: "0.8k / 2.2k words", + author: "Ingrid Solberg", + issue: "Winter 2024", + status: "drafting", + statusLabel: "Drafting", + progress: 30, + }, + { + title: "The Invisible Infrastructure of Cities", + wordProgress: "2.4k / 2.8k words", + author: "James Whitfield", + issue: "Autumn 2024", + status: "final-edit", + statusLabel: "Final edit", + progress: 85, + }, +] as const -function getStatusClasses(status: ArticleStatus): { - dotClassName: string - textClassName: string -} { - if (status === "in-revision") { - return { - dotClassName: "bg-amber-600/75", - textClassName: "text-amber-700 dark:text-amber-300", - } - } +const STATUS_BADGE_VARIANT = { + "in-revision": "outline", + "final-edit": "default", + drafting: "ghost", + published: "secondary", +} as const - if (status === "final-edit") { - return { - dotClassName: "bg-foreground/90", - textClassName: "text-foreground", - } - } - - if (status === "drafting") { - return { - dotClassName: "bg-muted-foreground/70", - textClassName: "text-muted-foreground", - } - } - - return { - dotClassName: "bg-muted-foreground/80", - textClassName: "text-muted-foreground", - } -} - -function PaginationButton({ - children, - active = false, -}: { - children: React.ReactNode - active?: boolean -}) { - return ( - - ) +const STATUS_DOT_CLASSNAME = { + "in-revision": "bg-amber-600/80", + "final-edit": "bg-foreground/90", + drafting: "bg-muted-foreground/60", + published: "bg-emerald-600/80", } export function ArticleDirectory() { return ( -
-
- {ARTICLE_ROWS.map((row) => { - const statusClasses = getStatusClasses(row.status) - - return ( -
-
-

{row.title}

-

{row.wordProgress}

-
- -
-
- - Author - - {row.author} -
-
- - Issue - - {row.issue} -
-
- -
-
- - {row.statusLabel} -
- {row.progress}% -
- -
-
-
-
- ) - })} - -
-

- Showing 4 of 24 -

-
- - - - 1 - 2 - 3 - - - -
-
-
- -
+ + + + + + + + + + - - - - Title - - - Author - - - Issue - - - Status - - - Progress - + + + Title + Author + Issue + Status + Progress - - {ARTICLE_ROWS.map((row) => { - const statusClasses = getStatusClasses(row.status) - - return ( - - -
-

- {row.title} -

-

{row.wordProgress}

-
- - - {row.author} - - - {row.issue} - - -
( + + +
+

+ {row.title} +

+

+ {row.wordProgress} +

+
+ + {row.author} + {row.issue} + + + - - {row.statusLabel} -
- - -
-
-
-
- - {row.progress}% - -
- - - ) - })} + /> + {row.statusLabel} + + + + + + {(formattedValue) => `${formattedValue}`} + + + + + ))}
- -
- -
-

- Showing 4 of 24 articles -

-
- - - - 1 - 2 - 3 - - - -
-
-
-
+ + + + + + + + + + {[1, 2, 3].map((page) => ( + + + {page} + + + ))} + + + + + + + + + ) } diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx index ba0ea92312..e03a2a951d 100644 --- a/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx +++ b/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx @@ -1,56 +1,46 @@ -"use client" +import { ArrowLeftIcon, PlusIcon } from "lucide-react" -import * as React from "react" -import { ChevronLeftIcon, SearchIcon } from "lucide-react" - -import { Button } from "@/styles/base-sera/ui/button" -import { Input } from "@/styles/base-sera/ui/input" import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/styles/base-sera/ui/select" + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/styles/base-sera/ui/breadcrumb" +import { Button } from "@/styles/base-sera/ui/button" +import { ButtonGroup } from "@/styles/base-sera/ui/button-group" export function PreviewHeader() { return ( -
-
-
- - Editorial dashboard +
+
+
+ + + + + + Editorial Dashboard + + + + +

+ Article Directory +

-

- Article Directory -

-
- -
-
- - +
+ + +
- - - -
) diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx index 2b4418b0f9..fea9d72df2 100644 --- a/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx +++ b/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx @@ -1,11 +1,14 @@ +import { Separator } from "@/styles/base-sera/ui/separator" + import { ArticleDirectory } from "./components/article-directory" import { PreviewHeader } from "./components/preview-header" export function Preview02() { return ( -
+
-
+ +
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx b/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx index 69126a3a2d..5435111176 100644 --- a/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx +++ b/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx @@ -1,19 +1,67 @@ "use client" -import * as React from "react" -import { BoldIcon, Code2Icon, LinkIcon } from "lucide-react" +import { + AlignCenterIcon, + AlignLeftIcon, + AlignRightIcon, + BoldIcon, + ChevronDownIcon, + Code2Icon, + Heading1Icon, + Heading2Icon, + Heading3Icon, + ImageIcon, + ItalicIcon, + LinkIcon, + ListIcon, + ListOrderedIcon, + RedoIcon, + StrikethroughIcon, + TypeIcon, + UnderlineIcon, + UndoIcon, +} from "lucide-react" import { Button } from "@/styles/base-sera/ui/button" +import { + ButtonGroup, + ButtonGroupSeparator, +} from "@/styles/base-sera/ui/button-group" import { Card, CardContent, - CardFooter, CardHeader, CardTitle, } from "@/styles/base-sera/ui/card" import { Checkbox } from "@/styles/base-sera/ui/checkbox" -import { Progress, ProgressValue } from "@/styles/base-sera/ui/progress" -import { Separator } from "@/styles/base-sera/ui/separator" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/styles/base-sera/ui/dropdown-menu" +import { + Field, + FieldGroup, + FieldLabel, + FieldLegend, + FieldSet, +} from "@/styles/base-sera/ui/field" +import { Input } from "@/styles/base-sera/ui/input" +import { + Progress, + ProgressLabel, + ProgressValue, +} from "@/styles/base-sera/ui/progress" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/styles/base-sera/ui/select" +import { Textarea } from "@/styles/base-sera/ui/textarea" type Milestone = { name: string @@ -45,160 +93,222 @@ const MILESTONES: Milestone[] = [ }, ] +const ISSUES = [ + { label: "Spring Issue 2024", value: "spring-2024" }, + { label: "Summer Issue 2024", value: "summer-2024" }, + { label: "Autumn Issue 2024", value: "autumn-2024" }, + { label: "Winter Issue 2024", value: "winter-2024" }, +] + export function EditorWorkspace() { return (
-
-
-
- + } + /> + + + + Normal Text + + + + Heading 1 + + + + Heading 2 + + + + Heading 3 + + + + Bullet List + + + + Numbered List + + + + + - - - - -
-

- 1,402 words -

+ + + + + + + + + + + + +
- -
-

- As cities continue to expand at an unprecedented rate, the architectural - paradigm is shifting from mere expansion to sustainable integration. The - concrete jungles of the 20th century are making way for structures that - breathe, adapt, and give back to their environments. +

+

+ The Future of Sustainable Architecture +

+

+ As cities continue to expand at an unprecedented rate, the + architectural paradigm is shifting from mere expansion to + sustainable integration. The concrete jungles of the 20th century + are making way for structures that breathe, adapt, and give back to + their environments.

- -

- Historically, urban development has been a zero-sum game with nature. We - paved over wetlands, redirected rivers, and constructed imposing glass towers - that guzzled energy. However, a new generation of architects, like Alistair - Sterling, are proposing a radical rethink of our built environment. +

+ Historically, urban development has been a zero-sum game with + nature. We paved over wetlands, redirected rivers, and constructed + imposing glass towers that guzzled energy. However, a new generation + of architects, like Alistair Sterling, are proposing a radical + rethink of our built environment.

- -

+

The Living Building Challenge

- -

- Sterling's latest project in downtown Seattle is a testament to this new - philosophy. "We are no longer designing static structures," Sterling - explained during a recent site visit. "We are engineering localized - ecosystems." +

+ Sterling's latest project in downtown Seattle is a testament to + this new philosophy. "We are no longer designing static + structures," Sterling explained during a recent site visit. + "We are engineering localized ecosystems."

- -

- The building features a facade of responsive biomaterials that adjust their - porosity based on humidity and temperature, significantly reducing the need - for artificial climate control. Rainwater is not merely channeled away but - captured, filtered through a series of integrated rooftop wetlands, and - reused within the building's greywater system. +

+ The building features a facade of responsive biomaterials that + adjust their porosity based on humidity and temperature, + significantly reducing the need for artificial climate control. + Rainwater is not merely channeled away but captured, filtered + through a series of integrated rooftop wetlands, and reused within + the building's greywater system.

- -

- This shift requires more than just innovative materials; it demands a - fundamental change in how we value space. The metric of success is no longer - simply cost per square foot, but the building's overall environmental impact - over its lifecycle. +

+ This shift requires more than just innovative materials; it demands + a fundamental change in how we value space. The metric of success is + no longer simply cost per square foot, but the building's + overall environmental impact over its lifecycle.

- -

- Integration of solar passive design elements needs more elaboration here. - Check with engineering team for specific stats. +

+ Integration of solar passive design elements needs more elaboration + here. Check with engineering team for specific stats. +

+

+ This shift requires more than just innovative materials; it demands + a fundamental change in how we value space. Check with engineering + team for specific stats.

- -