feat(ui): Add org select to <OAuthConsent />

packages/ui/src/components/OAuthConsent/OAuthConsent.tsx

@@ -16,6 +16,8 @@ import type { ThemableCssProp } from '@/ui/styledSystem';
 import { common } from '@/ui/styledSystem';
 import { colors } from '@/ui/utils/colors';
 
+import { OrgSelect } from './OrgSelect';
+
 const OFFLINE_ACCESS_SCOPE = 'offline_access';
 
 export function OAuthConsentInternal() {
@@ -24,6 +26,18 @@ export function OAuthConsentInternal() {
   const { user } = useUser();
   const { applicationName, logoImageUrl } = useEnvironment().displayConfig;
   const [isUriModalOpen, setIsUriModalOpen] = useState(false);
+  const [selectedValue, setSelectedValue] = useState<string | null>('clerk-nation');
+
+  const selectOptions = [
+    { value: 'clerk-nation', label: 'Clerk Nation', logoUrl: 'https://img.clerk.com/static/clerk.png' },
+    {
+      value: 'perky-clerky',
+      label: 'Perky Clerky Clerk Nation Clerk Nation Clerk Nation',
+      logoUrl: 'https://img.clerk.com/static/clerk.png',
+    },
+    { value: 'clerk', label: 'Clerk', logoUrl: 'https://img.clerk.com/static/clerk.png' },
+    { value: 'clerk-of-oz', label: 'The Clerk of Oz', logoUrl: 'https://img.clerk.com/static/clerk.png' },
+  ];
 
   const primaryIdentifier = user?.primaryEmailAddress?.emailAddress || user?.primaryPhoneNumber?.phoneNumber;
 
@@ -108,6 +122,17 @@ export function OAuthConsentInternal() {
             <Header.Title localizationKey={oAuthApplicationName} />
             <Header.Subtitle localizationKey={`wants to access ${applicationName} on behalf of ${primaryIdentifier}`} />
           </Header.Root>
+
+          {selectOptions.length > 0 && (
+            <Box>
+              <OrgSelect
+                options={selectOptions}
+                value={selectedValue}
+                onChange={setSelectedValue}
+              />
+            </Box>
+          )}
+
           <Box
             sx={t => ({
               textAlign: 'start',

packages/ui/src/components/OAuthConsent/OrgSelect.tsx

@@ -0,0 +1,110 @@
+import { useRef } from 'react';
+
+import { Box, Icon, Image, Text } from '@/ui/customizables';
+import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Check } from '@/ui/icons';
+import { common } from '@/ui/styledSystem';
+
+export type OrgOption = {
+  value: string;
+  label: string;
+  logoUrl: string;
+};
+
+type OrgSelectProps = {
+  options: OrgOption[];
+  value: string | null;
+  onChange: (value: string) => void;
+};
+
+export function OrgSelect({ options, value, onChange }: OrgSelectProps) {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const selected = options.find(option => option.value === value);
+
+  return (
+    <Select
+      options={options}
+      value={value}
+      onChange={option => onChange(option.value)}
+      referenceElement={buttonRef}
+      renderOption={(option, _index, isSelected) => (
+        <Box
+          as='span'
+          sx={theme => ({
+            width: '100%',
+            display: 'grid',
+            gridTemplateColumns: `${theme.sizes.$5} 1fr ${theme.sizes.$3}`,
+            columnGap: theme.space.$2,
+            paddingInlineStart: theme.space.$1,
+            paddingInlineEnd: theme.space.$1x5,
+            paddingBlock: theme.space.$1,
+            alignItems: 'center',
+            borderRadius: theme.radii.$md,
+            '&:hover, &[data-focused="true"]': {
+              background: common.mutedBackground(theme),
+            },
+          })}
+        >
+          <Image
+            src={option.logoUrl}
+            alt={option.label}
+            sx={theme => ({
+              width: theme.sizes.$5,
+              height: theme.sizes.$5,
+              objectFit: 'contain',
+              flexShrink: 0,
+            })}
+          />
+          <Text
+            sx={{ flex: 1, textAlign: 'start', minWidth: 0, maxInlineSize: '200px' }}
+            truncate
+            as='span'
+            variant='subtitle'
+          >
+            {option.label}
+          </Text>
+          {isSelected && (
+            <Icon
+              icon={Check}
+              size='sm'
+              sx={theme => ({ color: theme.colors.$primary500 })}
+            />
+          )}
+        </Box>
+      )}
+    >
+      <SelectButton
+        ref={buttonRef}
+        sx={theme => ({
+          inlineSize: 'min(100%, 16rem)',
+          paddingInline: theme.space.$3,
+        })}
+      >
+        <Image
+          src={selected?.logoUrl || ''}
+          alt={selected?.label || ''}
+          sx={theme => ({
+            width: theme.sizes.$5,
+            height: theme.sizes.$5,
+            borderRadius: theme.radii.$md,
+            objectFit: 'contain',
+            flexShrink: 0,
+          })}
+        />
+        <Text
+          colorScheme='body'
+          as='span'
+          truncate
+          sx={{
+            flex: 1,
+            minWidth: 0,
+            textAlign: 'start',
+          }}
+        >
+          {selected?.label || 'Select an option'}
+        </Text>
+      </SelectButton>
+      <SelectOptionList />
+    </Select>
+  );
+}