Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-02 10:03:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auto format/lint and revert some changes made to CI (#2429)

Browse source 
Revert some changes made to CI in #2412
 - Auto lint and format
This commit is contained in:
Vítor Vasconcellos 2024-05-01 10:59:16 -03:00 committed by GitHub
parent d4df195c55
commit e4b0aedf64
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 166 additions and 171 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.github/workflows/cache-factory.yaml vendored
View file

@ -54,11 +54,11 @@ jobs:
runs-on: ${{ matrix.settings.host }}
if: github.repository == 'spacedriveapp/spacedrive'
permissions: {}
timeout-minutes: 150 # 2.5 hours
timeout-minutes: 150 # 2.5 hours
steps:
- name: Maximize build space
if: ${{ runner.os == 'Linux' }}
uses: easimon/maximize-build-space@fc881a613ad2a34aca9c9624518214ebc21dfc0c # master
uses: easimon/maximize-build-space@master
with:
swap-size-mb: 4096
root-reserve-mb: 6144
@ -68,17 +68,13 @@ jobs:
remove-docker-images: 'true'
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Symlink target to C:\
if: ${{ runner.os == 'Windows' }}
shell: powershell
run: |
New-Item -ItemType Directory -Force -Path C:\spacedrive_target
- name: Symlink target to C:\
if: ${{ runner.os == 'Windows' }}
shell: powershell
run: |
New-Item -Path target -ItemType Junction -Value C:\spacedrive_target
- name: Setup System and Rust

33
.github/workflows/ci.yml vendored
View file

@ -26,7 +26,7 @@ jobs:
permissions: {}
steps:
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Setup Node.js, pnpm and dependencies
uses: ./.github/actions/setup-pnpm
@ -43,7 +43,7 @@ jobs:
timeout-minutes: 5
steps:
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Setup Node.js, pnpm and dependencies
uses: ./.github/actions/setup-pnpm
@ -60,7 +60,7 @@ jobs:
permissions: {}
steps:
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Setup System and Rust
uses: ./.github/actions/setup-system
@ -81,7 +81,7 @@ jobs:
ln -sf /Users/runner/Library/Caches/Cypress /Users/runner/.cache/Cypress
- name: Setup Cypress
uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a # v6
uses: cypress-io/github-action@v6
with:
runTests: false
working-directory: .
@ -90,7 +90,7 @@ jobs:
run: pnpm test-data small
- name: E2E test
uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a # v6
uses: cypress-io/github-action@v6
with:
build: npx cypress info
install: false
@ -98,14 +98,15 @@ jobs:
working-directory: apps/web
- name: Upload cypress screenshots
uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 # v4
uses: actions/upload-artifact@v4
if: always()
with:
name: cypress-screenshots
path: apps/web/cypress/screenshots
if-no-files-found: ignore
- name: Upload cypress video's
uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808
uses: actions/upload-artifact@v4
if: always()
with:
name: cypress-videos
@ -121,7 +122,7 @@ jobs:
steps:
- name: Maximize build space
if: ${{ runner.os == 'Linux' }}
uses: easimon/maximize-build-space@fc881a613ad2a34aca9c9624518214ebc21dfc0c # master
uses: easimon/maximize-build-space@master
with:
swap-size-mb: 3072
root-reserve-mb: 6144
@ -142,10 +143,10 @@ jobs:
New-Item -Path target -ItemType Junction -Value C:\spacedrive_target
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Check if files have changed
uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
uses: dorny/paths-filter@v3
continue-on-error: true
id: filter
with:
@ -184,7 +185,7 @@ jobs:
steps:
- name: Maximize build space
if: ${{ runner.os == 'Linux' }}
uses: easimon/maximize-build-space@fc881a613ad2a34aca9c9624518214ebc21dfc0c # master
uses: easimon/maximize-build-space@master
with:
swap-size-mb: 3072
root-reserve-mb: 6144
@ -198,17 +199,13 @@ jobs:
shell: powershell
run: |
New-Item -ItemType Directory -Force -Path C:\spacedrive_target
- name: Symlink target to C:\
if: ${{ runner.os == 'Windows' }}
shell: powershell
run: |
New-Item -Path target -ItemType Junction -Value C:\spacedrive_target
- name: Checkout repository
uses: actions/checkout@1e31de5234b9f8995739874a8ce0492dc87873e2 # v4
uses: actions/checkout@v4
- name: Find files that have changed
uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3
uses: dorny/paths-filter@v3
continue-on-error: true
id: filter
with:
@ -235,7 +232,7 @@ jobs:
- name: Run Clippy
if: steps.filter.outcome != 'success' || steps.filter.outputs.changes == 'true'
uses: actions-rs-plus/clippy-check@30fef0f891edb491831cd248156cfb18d7d12fda # v2
uses: actions-rs-plus/clippy-check@v2
with:
args: --workspace --all-features --locked

53
apps/mobile/src/components/header/DynamicHeader.tsx
View file

@ -6,8 +6,8 @@ import { Platform, Pressable, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { tw, twStyle } from '~/lib/tailwind';
import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
import { Icon } from '../icons/Icon';
import { Icon } from '../icons/Icon';
type Props = {
headerRoute?: NativeStackHeaderProps; //supporting title from the options object of navigation
@ -36,15 +36,12 @@ export default function DynamicHeader({
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
<View style={tw`w-full flex-row items-center justify-between`}>
<View style={tw`flex-row items-center gap-3`}>
<Pressable
hitSlop={24}
onPress={() => navigation.goBack()}
>
<ArrowLeft size={23} color={tw.color('ink')} />
</Pressable>
<Pressable hitSlop={24} onPress={() => navigation.goBack()}>
<ArrowLeft size={23} color={tw.color('ink')} />
</Pressable>
<View style={tw`flex-row items-center gap-1.5`}>
<HeaderIconKind routeParams={optionsRoute?.params} kind={kind} />
<Text
<HeaderIconKind routeParams={optionsRoute?.params} kind={kind} />
<Text
numberOfLines={1}
style={tw`max-w-[200px] text-xl font-bold text-white`}
>
@ -52,8 +49,9 @@ export default function DynamicHeader({
</Text>
</View>
</View>
<View style={tw`flex-row gap-3`}>
{explorerMenu && <Pressable
<View style={tw`flex-row gap-3`}>
{explorerMenu && (
<Pressable
hitSlop={12}
onPress={() => {
getExplorerStore().toggleMenu = !explorerStore.toggleMenu;
@ -65,22 +63,23 @@ export default function DynamicHeader({
explorerStore.toggleMenu ? 'text-accent' : 'text-zinc-300'
)}
/>
</Pressable>}
</Pressable>
)}
<Pressable
hitSlop={12}
onPress={() => {
navigation.navigate('SearchStack', {
screen: 'Search'
});
}}
>
<MagnifyingGlass
size={24}
weight="bold"
color={tw.color('text-zinc-300')}
/>
</Pressable>
</View>
hitSlop={12}
onPress={() => {
navigation.navigate('SearchStack', {
screen: 'Search'
});
}}
>
<MagnifyingGlass
size={24}
weight="bold"
color={tw.color('text-zinc-300')}
/>
</Pressable>
</View>
</View>
</View>
</View>
@ -92,7 +91,7 @@ interface HeaderIconKindProps {
kind: Props['kind'];
}
const HeaderIconKind = ({routeParams, kind }: HeaderIconKindProps) => {
const HeaderIconKind = ({ routeParams, kind }: HeaderIconKindProps) => {
switch (kind) {
case 'location':
return <Icon size={30} name="Folder" />;

59
apps/mobile/src/components/header/Header.tsx
View file

@ -13,12 +13,7 @@ type Props = {
};
// Default header with search bar and button to open drawer
export default function Header({
route,
navBack,
title,
search = false
}: Props) {
export default function Header({ route, navBack, title, search = false }: Props) {
const navigation = useNavigation<DrawerNavigationHelpers>();
const headerHeight = useSafeAreaInsets().top;
const isAndroid = Platform.OS === 'android';
@ -32,35 +27,33 @@ export default function Header({
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
<View style={tw`w-full flex-row items-center justify-between`}>
<View style={tw`flex-row items-center gap-3`}>
{navBack ? (
<Pressable
hitSlop={24}
onPress={() => navigation.goBack()}
>
<ArrowLeft size={24} color={tw.color('ink')} />
</Pressable>
) : (
<Pressable onPress={() => navigation.openDrawer()}>
<List size={24} color={tw.color('ink')} />
</Pressable>
)}
{navBack ? (
<Pressable hitSlop={24} onPress={() => navigation.goBack()}>
<ArrowLeft size={24} color={tw.color('ink')} />
</Pressable>
) : (
<Pressable onPress={() => navigation.openDrawer()}>
<List size={24} color={tw.color('ink')} />
</Pressable>
)}
<Text style={tw`text-xl font-bold text-ink`}>{title || route?.name}</Text>
</View>
{search && <Pressable
hitSlop={24}
onPress={() => {
navigation.navigate('SearchStack', {
screen: 'Search'
});
}}
>
<MagnifyingGlass
size={24}
weight="bold"
color={tw.color('text-zinc-300')}
/>
</Pressable>}
{search && (
<Pressable
hitSlop={24}
onPress={() => {
navigation.navigate('SearchStack', {
screen: 'Search'
});
}}
>
<MagnifyingGlass
size={24}
weight="bold"
color={tw.color('text-zinc-300')}
/>
</Pressable>
)}
</View>
</View>
</View>

21
apps/mobile/src/components/header/SearchHeader.tsx
View file

@ -4,14 +4,14 @@ import { ArrowLeft } from 'phosphor-react-native';
import { Platform, Pressable, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { tw, twStyle } from '~/lib/tailwind';
import Search from '../search/Search';
import Search from '../search/Search';
const searchPlaceholder = {
locations: 'Search location name...',
tags: 'Search tag name...',
categories: 'Search category name...',
}
categories: 'Search category name...'
};
type Props = {
route?: RouteProp<any, any>; // supporting title from the options object of navigation
@ -19,11 +19,7 @@ type Props = {
title?: string; // in some cases - we want to override the route title
};
export default function SearchHeader({
route,
kind,
title
}: Props) {
export default function SearchHeader({ route, kind, title }: Props) {
const navigation = useNavigation<DrawerNavigationHelpers>();
const headerHeight = useSafeAreaInsets().top;
const isAndroid = Platform.OS === 'android';
@ -37,12 +33,9 @@ export default function SearchHeader({
<View style={tw`mx-auto h-auto w-full justify-center px-5 pb-3`}>
<View style={tw`w-full flex-row items-center justify-between`}>
<View style={tw`flex-row items-center gap-3`}>
<Pressable
hitSlop={24}
onPress={() => navigation.goBack()}
>
<ArrowLeft size={24} color={tw.color('ink')} />
</Pressable>
<Pressable hitSlop={24} onPress={() => navigation.goBack()}>
<ArrowLeft size={24} color={tw.color('ink')} />
</Pressable>
<Text style={tw`text-xl font-bold text-ink`}>{title || route?.name}</Text>
</View>
</View>

46
apps/mobile/src/components/layout/ScreenContainer.tsx
View file

@ -24,32 +24,32 @@ const ScreenContainer = ({
const bottomTabBarHeight = Platform.OS === 'ios' ? 80 : 60;
return scrollview ? (
<View style={tw`relative flex-1`}>
<ScrollView
ref={ref}
onContentSizeChange={() => {
if (!scrollToBottomOnChange) return;
ref.current?.scrollToEnd({ animated: true });
}}
contentContainerStyle={twStyle('justify-between gap-10 py-6', style)}
style={twStyle(
'flex-1 bg-black',
tabHeight && { marginBottom: bottomTabBarHeight }
)}
>
{children}
</ScrollView>
<ScrollView
ref={ref}
onContentSizeChange={() => {
if (!scrollToBottomOnChange) return;
ref.current?.scrollToEnd({ animated: true });
}}
contentContainerStyle={twStyle('justify-between gap-10 py-6', style)}
style={twStyle(
'flex-1 bg-black',
tabHeight && { marginBottom: bottomTabBarHeight }
)}
>
{children}
</ScrollView>
</View>
) : (
<View style={tw`relative flex-1`}>
<View
style={twStyle(
'flex-1 justify-between gap-10 bg-black py-6',
style,
tabHeight && { marginBottom: bottomTabBarHeight }
)}
>
{children}
</View>
<View
style={twStyle(
'flex-1 justify-between gap-10 bg-black py-6',
style,
tabHeight && { marginBottom: bottomTabBarHeight }
)}
>
{children}
</View>
</View>
);
};

28
apps/mobile/src/navigation/tabs/BrowseStack.tsx
View file

@ -1,6 +1,8 @@
import { CompositeScreenProps } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import DynamicHeader from '~/components/header/DynamicHeader';
import Header from '~/components/header/Header';
import SearchHeader from '~/components/header/SearchHeader';
import BrowseScreen from '~/screens/browse/Browse';
import LibraryScreen from '~/screens/browse/Library';
import LocationScreen from '~/screens/browse/Location';
@ -8,8 +10,6 @@ import LocationsScreen from '~/screens/browse/Locations';
import TagScreen from '~/screens/browse/Tag';
import TagsScreen from '~/screens/browse/Tags';
import DynamicHeader from '~/components/header/DynamicHeader';
import SearchHeader from '~/components/header/SearchHeader';
import { TabScreenProps } from '../TabNavigator';
const Stack = createNativeStackNavigator<BrowseStackParamList>();
@ -20,42 +20,50 @@ export default function BrowseStack() {
<Stack.Screen
name="Browse"
component={BrowseScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <Header search route={route} />
})}
/>
<Stack.Screen
name="Location"
component={LocationScreen}
options={({route: optionsRoute}) => ({
header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="location" />
options={({ route: optionsRoute }) => ({
header: (route) => (
<DynamicHeader
optionsRoute={optionsRoute}
headerRoute={route}
kind="location"
/>
)
})}
/>
<Stack.Screen
name="Tags"
component={TagsScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <SearchHeader kind="tags" route={route} />
})}
/>
<Stack.Screen
name="Locations"
component={LocationsScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <SearchHeader kind="locations" route={route} />
})}
/>
<Stack.Screen
name="Tag"
component={TagScreen}
options={({route: optionsRoute}) => ({
header: (route) => <DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="tag" />
options={({ route: optionsRoute }) => ({
header: (route) => (
<DynamicHeader optionsRoute={optionsRoute} headerRoute={route} kind="tag" />
)
})}
/>
<Stack.Screen
name="Library"
component={LibraryScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <Header navBack route={route} />
})}
/>

2
apps/mobile/src/navigation/tabs/NetworkStack.tsx
View file

@ -13,7 +13,7 @@ export default function NetworkStack() {
<Stack.Screen
name="Network"
component={NetworkScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <Header search route={route} />
})}
/>

8
apps/mobile/src/navigation/tabs/OverviewStack.tsx
View file

@ -1,10 +1,10 @@
import { CompositeScreenProps } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import Header from '~/components/header/Header';
import SearchHeader from '~/components/header/SearchHeader';
import CategoriesScreen from '~/screens/overview/Categories';
import OverviewScreen from '~/screens/overview/Overview';
import Header from '~/components/header/Header';
import SearchHeader from '~/components/header/SearchHeader';
import { TabScreenProps } from '../TabNavigator';
const Stack = createNativeStackNavigator<OverviewStackParamList>();
@ -15,14 +15,14 @@ export default function OverviewStack() {
<Stack.Screen
name="Overview"
component={OverviewScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <Header search route={route} />
})}
/>
<Stack.Screen
name="Categories"
component={CategoriesScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <SearchHeader kind="categories" route={route} />
})}
/>

4
apps/mobile/src/navigation/tabs/SettingsStack.tsx
View file

@ -3,6 +3,7 @@ import { CompositeScreenProps } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import Header from '~/components/header/Header';
import SearchHeader from '~/components/header/SearchHeader';
import AppearanceSettingsScreen from '~/screens/settings/client/AppearanceSettings';
import ExtensionsSettingsScreen from '~/screens/settings/client/ExtensionsSettings';
import GeneralSettingsScreen from '~/screens/settings/client/GeneralSettings';
@ -18,7 +19,6 @@ import NodesSettingsScreen from '~/screens/settings/library/NodesSettings';
import TagsSettingsScreen from '~/screens/settings/library/TagsSettings';
import SettingsScreen from '~/screens/settings/Settings';
import SearchHeader from '~/components/header/SearchHeader';
import { TabScreenProps } from '../TabNavigator';
const Stack = createNativeStackNavigator<SettingsStackParamList>();
@ -29,7 +29,7 @@ export default function SettingsStack() {
<Stack.Screen
name="Settings"
component={SettingsScreen}
options={({route}) => ({
options={({ route }) => ({
header: () => <Header search route={route} />
})}
/>

36
apps/mobile/src/screens/settings/Settings.tsx
View file

@ -142,24 +142,24 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
return (
<ScreenContainer tabHeight={false} scrollview={false} style={tw`gap-0 px-6 py-0`}>
<SectionList
contentContainerStyle={tw`py-6`}
sections={sections(debugState)}
renderItem={({ item }) => (
<SettingsItem
title={item.title}
leftIcon={item.icon}
onPress={() => navigation.navigate(item.navigateTo as any)}
rounded={item.rounded}
/>
)}
renderSectionHeader={renderSectionHeader}
ListFooterComponent={<FooterComponent />}
showsVerticalScrollIndicator={false}
stickySectionHeadersEnabled={false}
initialNumToRender={50}
/>
</ScreenContainer>
<SectionList
contentContainerStyle={tw`py-6`}
sections={sections(debugState)}
renderItem={({ item }) => (
<SettingsItem
title={item.title}
leftIcon={item.icon}
onPress={() => navigation.navigate(item.navigateTo as any)}
rounded={item.rounded}
/>
)}
renderSectionHeader={renderSectionHeader}
ListFooterComponent={<FooterComponent />}
showsVerticalScrollIndicator={false}
stickySectionHeadersEnabled={false}
initialNumToRender={50}
/>
</ScreenContainer>
);
}

2
core/src/api/files.rs
View file

@ -104,7 +104,7 @@ pub(crate) fn mount() -> AlphaRouter<Ctx> {
.include(object_with_file_paths::include())
.exec()
.await?
.map(|item| ObjectWithFilePaths2::from_db(item)))
.map(ObjectWithFilePaths2::from_db))
})
})
.procedure("getMediaData", {

2
core/src/api/locations.rs
View file

@ -271,7 +271,7 @@ pub(crate) fn mount() -> AlphaRouter<Ctx> {
.include(location_with_indexer_rules::include())
.exec()
.await?
.map(|location| LocationWithIndexerRule::from_db(location)))
.map(LocationWithIndexerRule::from_db))
})
})
.procedure("create", {

8
core/src/api/search/mod.rs
View file

@ -7,12 +7,8 @@ use crate::{
};
use prisma_client_rust::Operator;
use sd_core_indexer_rules::seed::no_hidden;
use sd_core_indexer_rules::IndexerRule;
use sd_core_prisma_helpers::{file_path_with_object, object_with_file_paths};
use sd_file_ext::kind::ObjectKind;
use sd_prisma::prisma::{self, location, PrismaClient};
use sd_utils::chain_optional_iter;
use sd_prisma::prisma::{self, PrismaClient};
use std::path::PathBuf;
@ -420,6 +416,6 @@ fn andify<T: From<Operator<T>>>(params: Vec<T>) -> Vec<T> {
params.into_iter().fold(vec![], |mut params, param| {
params.push(param);
vec![prisma_client_rust::operator::and(params).into()]
vec![prisma_client_rust::operator::and(params)]
})
}

4
interface/app/$libraryId/Explorer/View/ViewItem.tsx
View file

@ -60,7 +60,9 @@ export const useViewItemDoubleClick = () => {
break;
default: {
const paths =
selectedItem.type === 'Path' ? [selectedItem.item] : selectedItem.item.file_paths;
selectedItem.type === 'Path'
? [selectedItem.item]
: selectedItem.item.file_paths;
for (const filePath of paths) {
if (filePath.is_dir) {

9
interface/app/$libraryId/debug/sync.tsx
View file

@ -33,7 +33,10 @@ export const Component = () => {
onData: () => messages.refetch()
});
const groups = useMemo(() => (messages.data && calculateGroups(messages.data)) || [], [messages]);
const groups = useMemo(
() => (messages.data && calculateGroups(messages.data)) || [],
[messages]
);
return (
<ul className="space-y-4 p-4">
@ -41,7 +44,9 @@ export const Component = () => {
<Button
variant="accent"
onClick={() => {
dialogManager.create((dialogProps) => <SyncBackfillDialog {...dialogProps} />);
dialogManager.create((dialogProps) => (
<SyncBackfillDialog {...dialogProps} />
));
}}
disabled={backfillSync.isLoading}
>

12
packages/ui/src/Dialog.tsx
View file

@ -271,7 +271,9 @@ export function Dialog<S extends FieldValues>({
<AnimatedDialogContent
className="!pointer-events-none fixed inset-0 z-50 grid place-items-center overflow-y-auto"
style={styles}
onInteractOutside={(e) => props.ignoreClickOutside && e.preventDefault()}
onInteractOutside={(e) =>
props.ignoreClickOutside && e.preventDefault()
}
>
<Form
form={form}
@ -305,12 +307,16 @@ export function Dialog<S extends FieldValues>({
)}
>
{form.formState.isSubmitting && <Loader />}
{props.buttonsSideContent && <div>{props.buttonsSideContent}</div>}
{props.buttonsSideContent && (
<div>{props.buttonsSideContent}</div>
)}
<div className="grow" />
{!props.hideButtons && (
<div
className={clsx(
invertButtonFocus ? 'flex-row-reverse' : ' flex-row',
invertButtonFocus
? 'flex-row-reverse'
: ' flex-row',
'flex gap-2'
)}
>