TriggerFrontend/src/pages/settings/components/Theming/Themes/ThemeModalContent.tsx

import { Select, Stack, Text } from '@mantine/core';
import SearchSelectItem from 'pages/homepage/components/Search/SearchSelectItem';
import { selectClasses } from 'styles';
import type { Theme } from 'types';
import { ThemeExampleApp } from './ThemeExampleApp';

export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
	return (
		<Stack
			style={{
				backgroundImage:
					selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
						? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/${selectedTheme?.backgroundImage})`
						: undefined,
				backgroundSize:
					selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
						? 'cover'
						: undefined,
				backgroundColor:
					selectedTheme?.backgroundImage.toLocaleLowerCase() === 'none'
						? selectedTheme?.backgroundColor
						: undefined,
				backgroundPosition: 'center',
				borderRadius: '10px',
				border: '2px solid var(--mantine-color-primary-0)',
				padding: '1rem',
			}}
			align='center'
		>
			<Select
				disabled
				w={'80%'}
				classNames={selectClasses}
				className={selectClasses.searchExample}
				styles={{
					input: {
						color: selectedTheme?.primaryColor,
						borderBottom: `thin solid ${selectedTheme?.borderColor}`,
						backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
					},
				}}
				data={[
					{
						label: 'Google Search',
						value: 'google',
					},
				]}
				searchValue={'example search'}
				data-active={true}
				dropdownOpened={true}
				autoFocus={false}
				leftSection={'Google Search'}
				rightSection={<div />}
				renderOption={(item: any) => {
					return (
						<SearchSelectItem
							item={item}
							handleSearchHistoryItem={undefined}
							searchEndpoint={undefined}
						/>
					);
				}}
			/>
			<Stack gap={0} w={'100%'}>
				<Text
					pl={'1.5rem'}
					style={{
						textDecoration: 'underline',
						fontSize: '1.25rem',
						fontWeight: 200,
						fontStyle: 'italic',
						height: '10px',
						textTransform: 'uppercase',
						marginTop: '1.25rem',
						marginBottom: '1.25rem',
						color: selectedTheme?.primaryColor,
					}}
				>
					Applications
				</Text>
				<Stack
					style={{
						gap: '.25rem',
						backgroundSize: 'cover',
						borderBottom: '0px solid',
						display: 'grid',
						gridColumnGap: '5px',
						gridRowGap: '5px',
						gridTemplateColumns: '1fr 1fr 1fr',
						gridTemplateRows: '64px',
						padding: '1rem',
						paddingTop: 0,
						justifyContent: 'center',
						alignContent: 'center',
					}}
				>
					<ThemeExampleApp selectedTheme={selectedTheme} />
					<ThemeExampleApp selectedTheme={selectedTheme} />
					<ThemeExampleApp selectedTheme={selectedTheme} />
				</Stack>
			</Stack>
			<Stack gap={0} w={'100%'}>
				<Text
					pl={'1.5rem'}
					style={{
						textDecoration: 'underline',
						fontSize: '1.25rem',
						fontWeight: 200,
						fontStyle: 'italic',
						height: '10px',
						textTransform: 'uppercase',
						marginTop: '1.25rem',
						marginBottom: '1.25rem',
						color: selectedTheme?.primaryColor,
					}}
				>
					Bookmarks
				</Text>
				<Stack
					style={{
						width: '100%',
						display: 'flex',
						flexDirection: 'row',
						flexWrap: 'nowrap',
						gridColumnGap: '20px',
						gridRowGap: '0px',
						gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
						gridTemplateRows: 'auto',
					}}
				>
					<Stack
						style={{
							width: '100%',
							marginBottom: 0,
							display: 'block',
							lineHeight: '1.5rem',
							padding: '1rem',
							paddingTop: 0,
						}}
					>
						<Text
							style={{
								fontSize: '.875rem',
								height: '10px',
								width: 'auto',
								color: selectedTheme?.accentColor,
								textTransform: 'uppercase',
								marginTop: '1.25rem',
								marginBottom: '1.25rem',
							}}
						>
							Example Category
						</Text>
						<Text
							style={{
								display: 'block',
								fontSize: '.875rem',
								lineHeight: 2,
								color: selectedTheme?.primaryColor,
							}}
							component='a'
						>
							{'Bookmark 1'}
						</Text>
						<Text
							style={{
								display: 'block',
								fontSize: '.875rem',
								lineHeight: 2,
								color: selectedTheme?.primaryColor,
							}}
							component='a'
						>
							{'Bookmark 2'}
						</Text>
					</Stack>
					<Stack
						style={{
							width: '100%',
							marginBottom: 0,
							display: 'block',
							lineHeight: '1.5rem',
							padding: '1rem',
							paddingTop: 0,
						}}
					>
						<Text
							style={{
								fontSize: '.875rem',
								height: '10px',
								width: 'auto',
								color: selectedTheme?.accentColor,
								textTransform: 'uppercase',
								marginTop: '1.25rem',
								marginBottom: '1.25rem',
							}}
						>
							Example Category
						</Text>
						<Text
							style={{
								display: 'block',
								fontSize: '.875rem',
								lineHeight: 2,
								color: selectedTheme?.primaryColor,
							}}
							component='a'
						>
							{'Bookmark 1'}
						</Text>
						<Text
							style={{
								display: 'block',
								fontSize: '.875rem',
								lineHeight: 2,
								color: selectedTheme?.primaryColor,
							}}
							component='a'
						>
							{'Bookmark 2'}
						</Text>
					</Stack>
				</Stack>
			</Stack>
		</Stack>
	);
}