diff --git a/apps/site/components/Common/Searchbox/Footer/index.module.css b/apps/site/components/Common/Searchbox/Footer/index.module.css
index 95ec47b281a27..9f2342e65c412 100644
--- a/apps/site/components/Common/Searchbox/Footer/index.module.css
+++ b/apps/site/components/Common/Searchbox/Footer/index.module.css
@@ -51,3 +51,11 @@
@apply size-4;
}
}
+
+.poweredByWrapper {
+ @apply ml-0
+ flex
+ items-center
+ justify-end
+ lg:ml-8;
+}
diff --git a/apps/site/components/Common/Searchbox/Footer/index.tsx b/apps/site/components/Common/Searchbox/Footer/index.tsx
index 70f74dc553898..abe61775ac964 100644
--- a/apps/site/components/Common/Searchbox/Footer/index.tsx
+++ b/apps/site/components/Common/Searchbox/Footer/index.tsx
@@ -46,7 +46,7 @@ export const Footer = () => {
-
+
{
diff --git a/packages/ui-components/src/Common/CodeTabs/index.stories.tsx b/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
index 916c5271f7692..844e3f8e73582 100644
--- a/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
+++ b/packages/ui-components/src/Common/CodeTabs/index.stories.tsx
@@ -61,6 +61,15 @@ const TabsContent: FC = () => (
export const Default: Story = {};
+export const WithExtension: Story = {
+ args: {
+ tabs: [
+ { key: 'mjs', label: 'Example', extension: 'MJS' },
+ { key: 'cjs', label: 'Example', extension: 'CJS' },
+ ],
+ },
+};
+
export default {
component: CodeTabs,
args: {
diff --git a/packages/ui-components/src/Common/Tabs/index.module.css b/packages/ui-components/src/Common/Tabs/index.module.css
index f49c61cd7cc9f..f51259c26a0b5 100644
--- a/packages/ui-components/src/Common/Tabs/index.module.css
+++ b/packages/ui-components/src/Common/Tabs/index.module.css
@@ -22,6 +22,18 @@
text-neutral-800
dark:text-neutral-200;
+ .tabExtension {
+ @apply ml-1
+ rounded-xs
+ border
+ border-neutral-200
+ px-1
+ py-0.5
+ text-xs
+ font-normal
+ text-neutral-200;
+ }
+
.tabSecondaryLabel {
@apply pl-1
text-neutral-500
@@ -34,6 +46,11 @@
dark:border-b-green-400
dark:text-green-400;
+ .tabExtension {
+ @apply border-green-400
+ text-green-400;
+ }
+
.tabSecondaryLabel {
@apply text-green-800
dark:text-green-600;
diff --git a/packages/ui-components/src/Common/Tabs/index.tsx b/packages/ui-components/src/Common/Tabs/index.tsx
index ed0d93bfb2722..bd2f769b596a6 100644
--- a/packages/ui-components/src/Common/Tabs/index.tsx
+++ b/packages/ui-components/src/Common/Tabs/index.tsx
@@ -10,6 +10,7 @@ type Tab = {
label: string;
secondaryLabel?: string;
value?: string;
+ extension?: string;
};
type TabsProps = TabsPrimitive.TabsProps & {
@@ -37,6 +38,9 @@ const Tabs: FC> = ({
className={classNames(styles.tabsTrigger, triggerClassName)}
>
{tab.label}
+ {tab.extension && (
+ {tab.extension}
+ )}
{tab.secondaryLabel ? (
{tab.secondaryLabel}