@once-ui-system/core 1.7.11 → 1.7.12

package/ai/examples/blocks/Feed3.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { Avatar, Button, Column, EmojiPickerDropdown, IconButton, Media, OgCard, Row, Text, Textarea } from "@once-ui-system/core";
+import { useState } from "react";
+import { chatMessages } from "./content/chat1content";
+
+export const Feed3: React.FC<React.ComponentProps<typeof Column>> = ({ ...flex }) => {
+  const [message, setMessage] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const formatTime = (date: Date) => {
+    const d = new Date(date);
+    return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  };
+
+  const handleSubmitMessage = async () => {
+    if (!message.trim()) return;
+    
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      setMessage("");
+    } catch (err: any) {
+      setSubmitError(err.message || "An error occurred while submitting your message");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Column fill {...flex}>
+      <Row fillWidth paddingX="24" paddingY="8" background="surface" borderBottom="neutral-alpha-weak" vertical="center" gap="12">
+        <Text variant="label-default-s">👋 | intro</Text>
+        <Row minWidth="4" minHeight="4" background="neutral-strong" radius="full"/>
+        <Text variant="body-default-xs" onBackground="neutral-weak">Let us know a bit about you!</Text>
+      </Row>
+      <Column fill vertical="end">
+        <Column fill padding="16" gap="24" overflowY="auto">
+          {chatMessages.map((messages, index) => (
+            <Row key={index} fillWidth fitHeight gap="16">
+              <Avatar src={messages.author.avatar} />
+              <Column fillWidth gap="4">
+                <Row fillWidth gap="8" vertical="center">
+                  <Text variant="label-strong-s" onBackground="brand-medium">{messages.author.name}</Text>
+                  <Text variant="body-default-xs" onBackground="neutral-weak">{formatTime(messages.postedAt)}</Text>
+                </Row>
+                {messages.message && (
+                  <Text variant="body-default-s">{messages.message}</Text>
+                )}
+
+                {/* Attachments */}
+                {messages.attachments && messages.attachments.length > 0 && (
+                  <Column>
+                    {/* If multiple media, show as a grid-like row, else handle individually */}
+                    {messages.attachments.length > 1 ? (
+                      <Row maxWidth={48} marginTop="16" gap="8" wrap>
+                        {messages.attachments.map((att, aIdx) => (
+                          att?.media ? (
+                            <Media
+                              key={aIdx}
+                              maxWidth={20}
+                              src={att.media}
+                              border="neutral-alpha-weak"
+                              radius="l"
+                              sizes="320px"
+                            />
+                          ) : null
+                        ))}
+                      </Row>
+                    ) : (
+                      messages.attachments[0]?.media && (
+                        messages.attachments[0].media.includes("youtube.com") || messages.attachments[0].media.includes("youtu.be") ? (
+                          <Media maxWidth={32} border="neutral-alpha-weak" aspectRatio="16/9" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                        ) : (messages.attachments[0].media.match(/\.(png|jpg|jpeg|gif|webp)$/i)) ? (
+                          <Media maxWidth={32} border="neutral-alpha-weak" marginTop="16" src={messages.attachments[0].media} radius="l" sizes="320px"/>
+                        ) : (
+                          <Row maxWidth={24} marginTop="16">
+                            <OgCard url={messages.attachments[0].media} description={false} />
+                          </Row>
+                        )
+                      )
+                    )}
+                  </Column>
+                )}
+
+                {/* Reactions */}
+                {messages.reactions && messages.reactions.length > 0 && (
+                  <Row gap="4" marginTop="8">
+                    {messages.reactions.map((reaction, index) => (
+                      reaction.reacted ? (
+                        <Row key={index} background="brand-alpha-medium" radius="m">
+                          <Button size="s" data-scaling="90" variant="secondary">
+                            <Text marginRight="4">{reaction.emoji} {reaction.count}</Text>
+                          </Button>
+                        </Row>
+                      ) : (
+                        <Button key={index} size="s" data-scaling="90" variant="secondary">
+                          <Text marginRight="2">{reaction.emoji} {reaction.count}</Text>
+                        </Button>
+                      )
+                    ))}
+                  </Row>
+                )}
+              </Column>
+            </Row>
+          ))}
+        </Column>
+        <Row fillWidth paddingX="8" paddingBottom="12">
+          <Textarea
+            id="comment-input"
+            placeholder="Message 👋 | intro"
+            style={{padding: "0.75rem"}}
+            lines="auto"
+            value={message}
+            hasPrefix={
+              <EmojiPickerDropdown
+                onSelect={(emoji) => setMessage(message + emoji)}
+                trigger={
+                  <Row fillWidth data-border="rounded" style={{marginLeft: "-0.25rem"}}>
+                    <IconButton icon="smiley" size="m" variant="tertiary" />
+                  </Row>
+                }
+              />
+            }
+            hasSuffix={
+              <Row
+                style={{ opacity: message.length > 0 ? 1 : 0, marginRight: "-0.25rem" }}
+                transition="micro-medium">
+                <IconButton
+                  icon={isSubmitting ? "loading" : "send"}
+                  size="m"
+                  onClick={handleSubmitMessage}
+                  disabled={!message || isSubmitting}
+                />
+              </Row>
+            }
+            onChange={(e) => setMessage(e.target.value)}
+            disabled={isSubmitting}
+            error={!!submitError}
+            errorMessage={submitError}
+          >
+          </Textarea>
+        </Row>
+      </Column>
+    </Column>
+  )
+}

package/ai/examples/blocks/Footer1.tsx

@@ -0,0 +1,30 @@
+import { Row, IconButton, Text } from "@once-ui-system/core";
+
+export const Footer1: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex }) => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <Row as="footer" fillWidth padding="8" horizontal="center" s={{direction: "column"}} {...flex}>
+      <Row
+        maxWidth="m"
+        paddingY="8"
+        paddingX="16"
+        gap="16"
+        horizontal="between"
+        vertical="center"
+      >
+        <Text variant="body-default-s" onBackground="neutral-strong">
+          <Text onBackground="neutral-weak">© {currentYear} /</Text>
+          <Text paddingX="4">Once UI</Text>
+          <Text onBackground="neutral-weak">/ All rights reserved</Text>
+        </Text>
+        <Row gap="16">
+          <IconButton size="s" variant="ghost" href="#" icon="github" tooltip="GitHub" />
+          <IconButton size="s" variant="ghost" href="#" icon="linkedin" tooltip="LinkedIn" />
+          <IconButton size="s" variant="ghost" href="#" icon="threads" tooltip="Threads" />
+        </Row>
+      </Row>
+      <Row hide height="80" s={{hide: false}}/>
+    </Row>
+  );
+};

package/ai/examples/blocks/Footer2.tsx

@@ -0,0 +1,96 @@
+import {
+  Button,
+  Column,
+  Icon,
+  Logo,
+  Row,
+  SmartLink,
+  Text,
+} from "@once-ui-system/core";
+
+export const Footer2: React.FC<React.ComponentProps<typeof Row>> = ({ ...flex }) => {
+  return (
+    <Column gap="40" fillWidth paddingY="l" paddingX="24" {...flex}>
+      <Row fillWidth gap="12" textVariant="label-default-m" vertical="center">
+        <Logo href="#" dark icon="/trademarks/icon-dark.svg" size="m" />
+        <Logo href="#" light icon="/trademarks/icon-light.svg" size="m" />
+        <Button
+          data-border="rounded"
+          size="s"
+          weight="default"
+          variant="tertiary"
+          href="https://once-ui.com/products"
+        >
+          <Row gap="12" vertical="center">
+            Launch your app now
+            <Icon size="xs" name="arrowUpRight" onBackground="brand-medium" />
+          </Row>
+        </Button>
+      </Row>
+      <Row fillWidth horizontal="between" gap="40" wrap paddingX="2">
+        <Column gap="12" textVariant="label-default-m">
+          <Row paddingX="4" marginBottom="8">
+            Product
+          </Row>
+          <Row>
+            <SmartLink href="#">Solutions</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Components</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Templates</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Studio</SmartLink>
+          </Row>
+        </Column>
+        <Column gap="12" textVariant="label-default-m">
+          <Row paddingX="4" marginBottom="8">
+            Company
+          </Row>
+          <Row>
+            <SmartLink href="#">About</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Contact</SmartLink>
+          </Row>
+          <Row vertical="center" gap="8">
+            <SmartLink href="#">Join</SmartLink>
+            <Row textVariant="body-default-xs" onBackground="brand-weak" background="brand-alpha-weak" border="brand-alpha-medium" radius="s" padding="1" paddingX="8" center>
+              Hiring!
+            </Row>
+          </Row>
+        </Column>
+        <Column gap="12" textVariant="label-default-m">
+          <Row paddingX="4" marginBottom="8">
+            Resources
+          </Row>
+          <Row>
+            <SmartLink href="#">Terms of Use</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Privacy Policy</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Code of Conduct</SmartLink>
+          </Row>
+          <Row>
+            <SmartLink href="#">Contribution Guide</SmartLink>
+          </Row>
+        </Column>
+        <Column data-border="rounded" gap="12" textVariant="label-default-m">
+          <Row paddingX="4" marginBottom="8">
+            Social
+          </Row>
+          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="github" label="GitHub" />
+          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="linkedin" label="LinkedIn" />
+          <Button href="#" size="s" variant="secondary" weight="default" prefixIcon="threads" label="Threads" />
+        </Column>
+      </Row>
+      <Row fillWidth textVariant="label-default-s" gap="12">
+        {new Date().getFullYear()} <Text>•</Text> Once UI <Text onBackground="neutral-weak">// All rights reserved</Text>
+      </Row>
+    </Column>
+  );
+};

package/ai/examples/blocks/Footer3.tsx

@@ -0,0 +1,127 @@
+import { social } from "./content/resources";
+import { Column, Grid, IconButton, Logo, Row, SmartLink, Tag, Text } from "@once-ui-system/core";
+
+const navigation = [
+  {
+    title: "Free",
+    items: [
+      { label: "All Products", href: "#" },
+      { label: "Once UI Core", href: "#" },
+      { label: "Magic Portfolio", href: "#" },
+      { label: "Magic Docs", href: "#" },
+      { label: "Magic Bio", href: "#" },
+      { label: "Once UI Figma", href: "#" },
+    ],
+  },
+  {
+    title: "Pro",
+    items: [
+      { label: "Supa Social", href: "#", tag: "New" },
+      { label: "Magic Studio", href: "#", tag: "New" },
+      { label: "Supabase Starter", href: "#" },
+      { label: "Magic Convert", href: "#" },
+      { label: "Magic Spotlight", href: "#" },
+      { label: "Magic Journal", href: "#", tag: "New" },
+      { label: "Magic Store", href: "#" },
+      { label: "Magic Agent", href: "#" },
+      { label: "Once UI Blocks", href: "#" },
+    ]
+  },
+  {
+    title: "Learn",
+    items: [
+      { label: "Pricing", href: "#" },
+      { label: "Services", href: "#", tag: "New" },
+      { label: "Canvas", href: "#", tag: "New" },
+      { label: "Documentation", href: "#" },
+      { label: "Roadmap", href: "#" },
+      { label: "Changelog", href: "#" },
+      { label: "Handbook", href: "#", tag: "New" },
+    ],
+  },
+  {
+    title: "Resources",
+    items: [
+      { label: "Blog", href: "#" },
+      { label: "About us", href: "#" },
+      { label: "Contact us", href: "#" },
+      { label: "Sponsor us", href: "#" },
+      { label: "Merch store", href: "#" },
+      { label: "Brand assets", href: "#" },
+    ],
+  },
+  {
+    title: "Legal",
+    items: [
+      { label: "Terms of Use", href: "#" },
+      { label: "Privacy Policy", href: "#" },
+      { label: "License Agreement", href: "#" },
+    ]
+  },
+];
+
+export const Footer3 = (flex: React.ComponentProps<typeof Column>) => {
+  return (
+    <Column fillWidth horizontal="center" paddingTop="80" paddingBottom="16" {...flex}>
+      <Column maxWidth="xl" paddingX="l" horizontal="center" gap="48">
+        <Grid
+          fillWidth
+          columns={5}
+          m={{columns: 3}}
+          s={{columns: 2}}
+          gap="32">
+          {navigation.map((section) => (
+            <Column key={section.title} gap="24" paddingY="8">
+              <Text variant="label-default-s">
+                {section.title}
+              </Text>
+              <Row fillWidth s={{direction: "column"}} gap="24">
+                <Column fillWidth key={`${section.title}-${section.title}`} gap="16">
+                  {section.items.map((item: any) => (
+                    <SmartLink key={`${item.label}-${item.href}`} href={item.href} unstyled>
+                      <Text variant="body-default-s" onBackground="neutral-weak">
+                        {item.label}
+                      </Text>
+                      {item.tag && (
+                        <Tag style={{ transform: "scale(0.9)" }} variant="brand" size="s">
+                          {item.tag}
+                        </Tag>
+                      )}
+                    </SmartLink>
+                  ))}
+                </Column>
+              </Row>
+            </Column>
+          ))}
+        </Grid>
+        <Row fillWidth inline gap="8" vertical="center" textVariant="label-default-s" onBackground="neutral-weak" s={{direction: "column", horizontal: "start"}}>
+          <Row paddingRight="8">
+            <Logo size="s" href="/" dark icon="/trademarks/icon-dark.svg" />
+            <Logo size="s" href="/" light icon="/trademarks/icon-light.svg" />
+          </Row>
+          <Row wrap fillWidth gap="4">
+            Built with curiosity by{" "}
+            <SmartLink href="#" unstyled>
+              Lorant One
+            </SmartLink> and the{" "}
+            <SmartLink href="#" unstyled>
+              Design Engineers Club
+            </SmartLink>
+          </Row>
+          <Row gap="8">
+            {social.map((item, index) => (
+              <IconButton
+                data-border="rounded"
+                icon={item.icon}
+                variant="tertiary"
+                size="l"
+                key={index}
+                href={item.href}
+              />
+            ))}
+          </Row>
+        </Row>
+      </Column>
+    </Column>
+  );
+};