Sign in

jenna

@jjenzz.com
343 followers 78 following 37 posts

👩🏻‍💻 codes 🤘 gigs 😴 sleeps ♻️ repeats. creating tokenami.style, previously radix-ui.com/primitives. brain dump at jjenzz.com.

PostsRepliesMedia
jenna @jjenzz.com · 17/01/2025
i'll probably be the only that finds this useful but just in case—i've published a plugin for nextjs to declare a server/client boundary w/ import attributes ✨ github.com/jjenzz/next-...
0110
jenna @jjenzz.com · 10/12/2024
similar vibes 😅
000
jenna @jjenzz.com · 07/12/2024
mine thinks i am matt so we’re off to a bad start
010
jenna @jjenzz.com · 03/12/2024
ppl tend to do left instead of right so it's obvious why RSC is a struggle there. makes it harder to reach into server so you're inevitably fighting that friction. context is our friend here tbh—`Chat` can be a client comp w/o making `Header`, `Logo`, `Heading` one too etc.
const Page = () => <Chat />;

const Chat = () => (
  <div>
    <Header />
    <div>
      <Sidebar />
      <Main />
    </div>
  </div>
);

const Header = () => (
  <header>
    <Logo />
    <Heading />
  </header>
);

const Sidebar = () => (
  <aside>
    <ChatMenu />
  </aside>
);

const ChatMenu = () => (
  <ul>
    {items.map(item => <ChatMenuItem />)}
  </ul>
);

const ChatMenuItem = () => <li />;

const Main = () => (
  <main>
    <ChatMessages />
  </main>
)

const ChatMessages = () => (
  <div>
    {messages.map(message => <ChatMessagesItem />)}
  </div>
);

const ChatMessagesItem = () => <div />const Page = () => (
  <Chat>
    <Header>
      <Logo />
      <Heading>Title</Heading>
    </Header>
    <div>
      <Sidebar>
        <ChatMenu>
          {items.map(item => <ChatMenuItem />)}
        </ChatMenu>
      </Sidebar>
      <Main>
        <ChatMessages>
          {messages.map(message => <ChatMessagesItem />)}
        </ChatMessages>
      </Main>
    </div>
  </Chat>
);

const Header = () => <header>{children}</header>;
const Sidebar = () => <aside>{children}</aside>;
const Main = () => <main>{children}</main>;
const Chat = () => <div>{children}</div>;
const ChatMenu = () => <ul>{children}</ul>;
const ChatMenuItem = () => <li>{children}</li>;
const ChatMessages = () => <div>{children}</div>;
const ChatMessagesItem = () => <div />
040