diff --git a/app/article/[slug]/@comments/page.tsx b/app/article/[slug]/@comments/page.tsx new file mode 100644 index 00000000..992ce925 --- /dev/null +++ b/app/article/[slug]/@comments/page.tsx @@ -0,0 +1,13 @@ +import { CommentForm } from "components/article/@comments/comment-form"; +import { Comments } from "components/article/@comments/comments"; + +const CommentsPage = () => { + return ( +
+ + +
+ ); +}; + +export default CommentsPage; diff --git a/app/article/[slug]/layout.tsx b/app/article/[slug]/layout.tsx new file mode 100644 index 00000000..4e560b55 --- /dev/null +++ b/app/article/[slug]/layout.tsx @@ -0,0 +1,20 @@ +import type { PropsWithChildren, ReactNode } from "react"; + +type Props = { + comments: ReactNode; +}; + +const ArticleLayout = ({ children, comments }: PropsWithChildren) => { + return ( +
+
+
+ {children} + {comments} +
+
+
+ ); +}; + +export default ArticleLayout; diff --git a/app/article/[slug]/page.tsx b/app/article/[slug]/page.tsx new file mode 100644 index 00000000..db396e8b --- /dev/null +++ b/app/article/[slug]/page.tsx @@ -0,0 +1,15 @@ +import { Author } from "components/article/author"; +import { Content } from "components/article/content"; +import { Summary } from "components/article/summary"; + +const ArticlePage = () => { + return ( + <> + + + + + ); +}; + +export default ArticlePage; diff --git a/components/(home)/@feed/article-item/article-item.tsx b/components/(home)/@feed/article-item/article-item.tsx index 225b0eb8..eaf8d33b 100644 --- a/components/(home)/@feed/article-item/article-item.tsx +++ b/components/(home)/@feed/article-item/article-item.tsx @@ -32,7 +32,7 @@ export const ArticleItem = ({ article }: Props) => { {username} - {relativeTime} + {relativeTime} diff --git a/components/(home)/@feed/articles/articles.tsx b/components/(home)/@feed/articles/articles.tsx index 2c7b8e50..c3ea730c 100644 --- a/components/(home)/@feed/articles/articles.tsx +++ b/components/(home)/@feed/articles/articles.tsx @@ -8,10 +8,10 @@ type Props = { export const Articles = ({ articles }: Props) => { return ( -
+
    {articles.map((article) => ( ))} -
+ ); }; diff --git a/components/(home)/@feed/feed.tsx b/components/(home)/@feed/feed/feed.tsx similarity index 76% rename from components/(home)/@feed/feed.tsx rename to components/(home)/@feed/feed/feed.tsx index 99bc2ba9..e039e18f 100644 --- a/components/(home)/@feed/feed.tsx +++ b/components/(home)/@feed/feed/feed.tsx @@ -1,7 +1,7 @@ import type { Article } from "models/article"; -import { Articles } from "./articles"; -import { ArticlesPagination } from "./articles-pagination"; +import { Articles } from "../articles"; +import { ArticlesPagination } from "../articles-pagination"; type Props = { articles: Article[]; diff --git a/components/(home)/@feed/feed/index.ts b/components/(home)/@feed/feed/index.ts new file mode 100644 index 00000000..78a33879 --- /dev/null +++ b/components/(home)/@feed/feed/index.ts @@ -0,0 +1 @@ +export { Feed } from "./feed"; diff --git a/components/article/@comments/comment-form/comment-form.tsx b/components/article/@comments/comment-form/comment-form.tsx new file mode 100644 index 00000000..29d8de02 --- /dev/null +++ b/components/article/@comments/comment-form/comment-form.tsx @@ -0,0 +1,16 @@ +import { Button } from "components/shared/ui/button"; +import { Form } from "components/shared/ui/form"; + +export const CommentForm = () => { + return ( + + + + + +
+ +
+ + ); +}; diff --git a/components/article/@comments/comment-form/index.ts b/components/article/@comments/comment-form/index.ts new file mode 100644 index 00000000..8249e551 --- /dev/null +++ b/components/article/@comments/comment-form/index.ts @@ -0,0 +1 @@ +export { CommentForm } from "./comment-form"; diff --git a/components/article/@comments/comment-item/comment-item.tsx b/components/article/@comments/comment-item/comment-item.tsx new file mode 100644 index 00000000..beb5fa05 --- /dev/null +++ b/components/article/@comments/comment-item/comment-item.tsx @@ -0,0 +1,29 @@ +import Link from "next/link"; + +import { Avatar } from "components/shared/ui/avatar"; +import { ListItem } from "components/shared/ui/list-item"; + +export const CommentItem = () => { + return ( + +
+ + + + + + Eric Simons + 9 months ago + + + +
+ + + + With supporting text below as a natural lead-in to additional content. + + + + ); +}; diff --git a/components/article/@comments/comment-item/index.ts b/components/article/@comments/comment-item/index.ts new file mode 100644 index 00000000..3714ebb2 --- /dev/null +++ b/components/article/@comments/comment-item/index.ts @@ -0,0 +1 @@ +export { CommentItem } from "./comment-item"; diff --git a/components/article/@comments/comments/comments.tsx b/components/article/@comments/comments/comments.tsx new file mode 100644 index 00000000..ca20cf70 --- /dev/null +++ b/components/article/@comments/comments/comments.tsx @@ -0,0 +1,11 @@ +import { CommentItem } from "../comment-item"; + +export const Comments = () => { + return ( +
    + + + +
+ ); +}; diff --git a/components/article/@comments/comments/index.ts b/components/article/@comments/comments/index.ts new file mode 100644 index 00000000..ccf6267b --- /dev/null +++ b/components/article/@comments/comments/index.ts @@ -0,0 +1 @@ +export { Comments } from "./comments"; diff --git a/components/article/author/author.tsx b/components/article/author/author.tsx new file mode 100644 index 00000000..cc91b1c4 --- /dev/null +++ b/components/article/author/author.tsx @@ -0,0 +1,33 @@ +import Link from "next/link"; + +import { IoAdd, IoHeartOutline } from "react-icons/io5"; + +import { Avatar } from "components/shared/ui/avatar"; +import { Button } from "components/shared/ui/button"; + +export const Author = () => { + return ( +
+ + + + + + Eric Simons + Simons bed is comfortable + + + + +
+ + + +
+
+ ); +}; diff --git a/components/article/author/index.ts b/components/article/author/index.ts new file mode 100644 index 00000000..6af5e158 --- /dev/null +++ b/components/article/author/index.ts @@ -0,0 +1 @@ +export { Author } from "./author"; diff --git a/components/article/content/content.tsx b/components/article/content/content.tsx new file mode 100644 index 00000000..e8f166a3 --- /dev/null +++ b/components/article/content/content.tsx @@ -0,0 +1,17 @@ +export const Content = () => { + return ( +
+

+ {`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac dui feugiat, elementum est ut, sodales dolor. Quisque nec consequat ante, ac mattis risus. Vestibulum pretium nec sem vel rutrum. Sed congue ipsum sit amet tincidunt maximus. Phasellus vel nulla arcu. Nullam maximus viverra sollicitudin. Nunc nulla enim, consequat a sem at, lacinia auctor tellus. Quisque mollis hendrerit tortor. Quisque et fermentum lectus. Morbi volutpat eros vel lorem laoreet, id scelerisque quam malesuada. + +Phasellus id scelerisque leo. Nam dui risus, vehicula vel euismod vel, laoreet eget metus. Aliquam maximus condimentum enim, lobortis semper tortor volutpat id. Vivamus vehicula tellus nec vestibulum volutpat. Sed non maximus mi. Quisque iaculis urna aliquet interdum convallis. Suspendisse varius, nisl ac pretium accumsan, sem justo efficitur lectus, id blandit enim leo ut ligula. Ut quis neque magna. Cras vel enim nec eros venenatis ultrices sed eget dolor. Aliquam erat volutpat. Pellentesque sagittis felis in lectus vehicula, faucibus semper magna interdum. Phasellus elementum nisl nibh, at efficitur diam rutrum vel. + +Pellentesque eleifend iaculis aliquam. Ut consequat tellus nisi, id porta dolor laoreet lacinia. Donec diam quam, lacinia ac purus at, placerat scelerisque massa. Ut dictum quam at elementum convallis. Praesent dapibus risus vel convallis tincidunt. Sed nibh felis, placerat ac metus quis, euismod viverra neque. Nulla et tempor arcu, ut molestie elit. Sed porttitor ut risus vel commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam id eros et tellus laoreet porttitor. Vestibulum rutrum vulputate luctus. Nulla malesuada venenatis eros id fermentum. + +Cras luctus vehicula mattis. Cras id pulvinar leo, non elementum nulla. Integer at ultricies mi. Morbi tempus nisi porttitor malesuada tincidunt. Pellentesque et gravida justo. Proin erat lorem, feugiat a pulvinar a, euismod et turpis. Ut porttitor auctor quam non porttitor. Phasellus in odio sollicitudin, tristique erat non, bibendum elit. Aenean in nisl auctor lectus posuere pulvinar quis ut tellus. Donec elit odio, consequat eu lorem non, fermentum posuere tortor. Donec blandit dolor sed metus imperdiet, vitae ullamcorper tortor congue. Donec nec suscipit erat. Pellentesque ligula nisl, ultrices sit amet laoreet vel, faucibus vel orci. Aenean vitae dictum arcu. Maecenas convallis mauris vel aliquam rutrum. Nam a libero suscipit, scelerisque magna quis, dignissim risus. + +Donec iaculis sit amet velit sed accumsan. Etiam et gravida urna. Cras finibus massa nec turpis fringilla ornare. Nullam placerat commodo quam sit amet blandit. Maecenas vel sollicitudin tortor, at commodo neque. In hac habitasse platea dictumst. Nunc vitae elit non nibh auctor faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a ligula ut urna iaculis commodo. Nunc eleifend sapien nec mauris vestibulum suscipit. Duis tempor mi quis neque malesuada ullamcorper.`} +

+
+ ); +}; diff --git a/components/article/content/index.ts b/components/article/content/index.ts new file mode 100644 index 00000000..767e68cf --- /dev/null +++ b/components/article/content/index.ts @@ -0,0 +1 @@ +export { Content } from "./content"; diff --git a/components/article/summary/index.ts b/components/article/summary/index.ts new file mode 100644 index 00000000..4bdf4758 --- /dev/null +++ b/components/article/summary/index.ts @@ -0,0 +1 @@ +export { Summary } from "./summary"; diff --git a/components/article/summary/summary.tsx b/components/article/summary/summary.tsx new file mode 100644 index 00000000..cda3ebc6 --- /dev/null +++ b/components/article/summary/summary.tsx @@ -0,0 +1,30 @@ +import { RiDoubleQuotesL, RiDoubleQuotesR } from "react-icons/ri"; + +import { Tags } from "components/shared/ui/tags"; + +export const Summary = () => { + return ( +
+

How to build webapps that scale

+ +

9 months ago

+ + + realworld + implementations + + +
+
+ +
+ +

This is the description for the post.

+ +
+ +
+
+
+ ); +}; diff --git a/components/shared/ui/avatar/description.tsx b/components/shared/ui/avatar/bio.tsx similarity index 74% rename from components/shared/ui/avatar/description.tsx rename to components/shared/ui/avatar/bio.tsx index b0d8ddc4..04c0b9ab 100644 --- a/components/shared/ui/avatar/description.tsx +++ b/components/shared/ui/avatar/bio.tsx @@ -5,7 +5,7 @@ import { clsx } from "lib/clsx"; type Props = ComponentPropsWithoutRef<"span">; -export const Description = forwardRef(({ children, className, ...rest }, ref) => { +export const Bio = forwardRef(({ children, className, ...rest }, ref) => { return ( {children} diff --git a/components/shared/ui/avatar/index.ts b/components/shared/ui/avatar/index.ts index e7e35e44..08c1b319 100644 --- a/components/shared/ui/avatar/index.ts +++ b/components/shared/ui/avatar/index.ts @@ -1,4 +1,4 @@ -import { Description } from "./description"; +import { Bio } from "./bio"; import { Image } from "./image"; import { Info } from "./info"; import { Name } from "./name"; @@ -9,5 +9,5 @@ export const Avatar = { Image, Info, Name, - Description, + Bio, }; diff --git a/components/shared/ui/button/button.tsx b/components/shared/ui/button/button.tsx index 6fac87c2..b0642b3d 100644 --- a/components/shared/ui/button/button.tsx +++ b/components/shared/ui/button/button.tsx @@ -51,7 +51,7 @@ const styles = { "bg-white text-zinc-950 after:rounded-[4px] after:border-[1px] after:border-zinc-950 after:absolute after:inset-0 after:content-['']", }, size: { - [Size.SMALL]: "h-7 rounded-[4px] px-3 text-xs gap-[2px]", + [Size.SMALL]: "h-7 rounded-[4px] px-3 text-xs gap-1", [Size.LARGE]: "text-sm h-9 rounded-[4px] px-6 gap-1", }, } as const; diff --git a/components/shared/ui/form/index.ts b/components/shared/ui/form/index.ts new file mode 100644 index 00000000..b0328025 --- /dev/null +++ b/components/shared/ui/form/index.ts @@ -0,0 +1,9 @@ +import { Label } from "./label"; +import { Root } from "./root"; +import { Textarea } from "./text-area"; + +export const Form = { + Root, + Label, + Textarea, +}; diff --git a/components/shared/ui/form/label.tsx b/components/shared/ui/form/label.tsx new file mode 100644 index 00000000..59723144 --- /dev/null +++ b/components/shared/ui/form/label.tsx @@ -0,0 +1,17 @@ +import type { ComponentPropsWithoutRef } from "react"; +import { forwardRef } from "react"; + +import { clsx } from "lib/clsx"; + +type Props = ComponentPropsWithoutRef<"label"> & { + label: string; +}; + +export const Label = forwardRef(({ children, className, label, ...rest }, ref) => { + return ( + + ); +}); diff --git a/components/shared/ui/form/root.tsx b/components/shared/ui/form/root.tsx new file mode 100644 index 00000000..ed6a0b4d --- /dev/null +++ b/components/shared/ui/form/root.tsx @@ -0,0 +1,14 @@ +import type { ComponentPropsWithoutRef } from "react"; +import { forwardRef } from "react"; + +import { clsx } from "lib/clsx"; + +type Props = ComponentPropsWithoutRef<"form">; + +export const Root = forwardRef(({ children, className, ...rest }, ref) => { + return ( +
+ {children} +
+ ); +}); diff --git a/components/shared/ui/form/text-area.tsx b/components/shared/ui/form/text-area.tsx new file mode 100644 index 00000000..c51ff71f --- /dev/null +++ b/components/shared/ui/form/text-area.tsx @@ -0,0 +1,20 @@ +import type { ComponentPropsWithoutRef } from "react"; +import { forwardRef } from "react"; + +import { clsx } from "lib/clsx"; + +type Props = ComponentPropsWithoutRef<"textarea">; + +export const Textarea = forwardRef(({ className, ...rest }, ref) => { + return ( +