tio-design-make-experiments 0.0.1

package/src/imports/ButtonsAndActions.tsx

@@ -0,0 +1,139 @@
+function SpacerTestio() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio1() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function PopoverButtons() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="popover buttons">
+      <div className="flex flex-row items-center min-h-[inherit] size-full">
+        <div className="content-stretch flex items-center min-h-[inherit] px-[20px] py-[10px] relative w-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-h-px min-w-px relative text-[16px] text-white uppercase whitespace-pre-wrap">Popover button</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ActionsItemsInitial() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-bl-[10px] rounded-br-[10px] shrink-0 w-full" data-name="Actions Items/initial">
+      <div className="flex flex-row items-center min-h-[inherit] size-full">
+        <div className="content-stretch flex items-center min-h-[inherit] pb-[10px] pt-[8px] px-[20px] relative w-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-h-px min-w-px relative text-[16px] text-white uppercase whitespace-pre-wrap">Edit</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PopoverButtons1() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="popover buttons">
+      <div className="flex flex-row items-center min-h-[inherit] size-full">
+        <div className="content-stretch flex items-center min-h-[inherit] px-[20px] py-[10px] relative w-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-h-px min-w-px relative text-[16px] text-white uppercase whitespace-pre-wrap">Delete</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ActionsCheckSession() {
+  return (
+    <div className="bg-[#262626] content-stretch flex flex-col items-start p-[5px] relative rounded-[10px] shadow-[4px_4px_15px_0px_rgba(0,0,0,0.1)] shrink-0 w-[240px]" data-name="actions - check session">
+      <PopoverButtons />
+      <ActionsItemsInitial />
+      <PopoverButtons1 />
+    </div>
+  );
+}
+
+function SpacerTestio2() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio3() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function PopoverButtons2() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="popover buttons">
+      <div className="flex flex-row items-center min-h-[inherit] size-full">
+        <div className="content-stretch flex items-center min-h-[inherit] px-[20px] py-[10px] relative w-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-h-px min-w-px relative text-[16px] text-white uppercase whitespace-pre-wrap">Popover button</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PopoverButtons3() {
+  return (
+    <div className="bg-[#7954ff] min-h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="popover buttons">
+      <div className="flex flex-row items-center min-h-[inherit] size-full">
+        <div className="content-stretch flex items-center min-h-[inherit] px-[20px] py-[10px] relative w-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-h-px min-w-px relative text-[16px] text-white uppercase whitespace-pre-wrap">Hover</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Container() {
+  return (
+    <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-[240px]" data-name="Container">
+      <PopoverButtons2 />
+      <PopoverButtons3 />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="HEADER">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Popover menu</p>
+      <SpacerTestio />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">A popover/dropdown menu for additional actions and links</p>
+      <SpacerTestio1 />
+      <ActionsCheckSession />
+      <SpacerTestio2 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Popover buttons</p>
+      <SpacerTestio3 />
+      <Container />
+    </div>
+  );
+}
+
+function SpacerTestio4() {
+  return (
+    <div className="relative shrink-0 size-[50px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_80%_80%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+export default function ButtonsAndActions() {
+  return (
+    <div className="bg-[#181818] content-stretch flex flex-col items-start p-[50px] relative size-full" data-name="Buttons and actions">
+      <Header />
+      <SpacerTestio4 />
+    </div>
+  );
+}