Skip to content

Commit

Permalink
Started cleaning up Add Pages styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@azdak
azdak committed Nov 12, 2024
1 parent ad45745 commit c10951a
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 88 deletions.
86 changes: 86 additions & 0 deletions src/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,3 +327,89 @@ body {
opacity: 1;
}
}

/* Radix Select */
.SelectTrigger {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
padding: 0 15px;
font-size: 13px;
line-height: 1;
height: 35px;
gap: 5px;
background-color: white;
}
.SelectTrigger:hover {
background-color: var(--mauve-3);
}
.SelectTrigger:focus {
box-shadow: 0 0 0 2px black;
}
.SelectTrigger[data-placeholder] {
}

.SelectIcon {
}

.SelectContent {
overflow: hidden;
background-color: white;
border-radius: 6px;
box-shadow:
0px 10px 38px -10px rgba(22, 23, 24, 0.35),
0px 10px 20px -15px rgba(22, 23, 24, 0.2);
}

.SelectViewport {
padding: 5px;
}

.SelectItem {
font-size: 13px;
line-height: 1;
border-radius: 3px;
display: flex;
align-items: center;
height: 25px;
padding: 0 35px 0 25px;
position: relative;
user-select: none;
background-color: white;
}
.SelectItem[data-disabled] {
pointer-events: none;
}
.SelectItem[data-highlighted] {
outline: none;
}

.SelectLabel {
padding: 0 25px;
font-size: 12px;
line-height: 25px;
}

.SelectSeparator {
height: 1px;
margin: 5px;
}

.SelectItemIndicator {
position: absolute;
left: 0;
width: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
}

.SelectScrollButton {
display: flex;
align-items: center;
justify-content: center;
height: 25px;
background-color: white;
cursor: default;
}
203 changes: 115 additions & 88 deletions src/routes/protected/pages/add-pages.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from 'react';
import { ChevronDownIcon } from '@radix-ui/react-icons';
import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
import * as Select from '@radix-ui/react-select';
import * as Separator from '@radix-ui/react-separator';
import * as Tabs from '@radix-ui/react-tabs';
Expand Down Expand Up @@ -78,6 +78,7 @@ const AddPages = () => {
const { register, control, handleSubmit, reset, watch } = useForm({
defaultValues: {
urls: [{ url: '' }],
sitemapUrl: '',
property: '',
},
});
Expand All @@ -104,41 +105,47 @@ const AddPages = () => {
className="mt-7 space-y-6 rounded-lg bg-white p-6 shadow"
aria-live="polite"
>
<Tabs.Root className="TabsRoot" defaultValue="tab-url">
<Tabs.List
className="TabsList flex justify-center gap-4"
aria-label="Select how you want to add pages:"
>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-url"
>
By URL
</Tabs.Trigger>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-sitemap"
<form onSubmit={handleSubmit(onSubmit)}>
<Tabs.Root className="TabsRoot" defaultValue="tab-url">
<Tabs.List
className="TabsList flex justify-center gap-4"
aria-label="Select how you want to add pages:"
>
By Sitemap
</Tabs.Trigger>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-csv"
>
By CSV
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content className="TabsContent" value="tab-url">
<p className="Text">URL</p>
<form onSubmit={handleSubmit(onSubmit)}>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-url"
>
By URL
</Tabs.Trigger>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-sitemap"
>
By Sitemap
</Tabs.Trigger>
<Tabs.Trigger
className="TabsTrigger text-sm font-medium text-[#186121] underline underline-offset-8 hover:text-[#186121CC]"
value="tab-csv"
>
By CSV
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content className="TabsContent" value="tab-url">
{/*******
URL Input tab Content
**********/}
<p className="Text">URL</p>

<ul>
{fields.map((item, index) => {
return (
<li key={item.id} className="flex">
<input
className="flex w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors"
{...register(`urls.${index}.url`, {
required: true,
validate: (value) => {
return true;
}, // TODO conditional on current tab
})}
/>

Expand All @@ -162,75 +169,95 @@ const AddPages = () => {
>
Add URL
</button>
<Separator.Root />
<Controller
name="property"
control={control}
render={({ field }) => (
<Select.Root
value={field.value}
onValueChange={field.onChange}
>
<Select.Trigger
className="SelectTrigger"
aria-label="Add to Property"
>
<Select.Value placeholder="Select a Property…" />
<Select.Icon className="SelectIcon">
<ChevronDownIcon />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content>
<Select.ScrollUpButton />
<Select.Viewport>
<Select.Item value="none" key="null">
<Select.ItemText>None</Select.ItemText>
</Select.Item>
{initialProperties.map((item, index) => (
<Select.Item value={item.id} key={index}>
<Select.ItemText>{item.name}</Select.ItemText>
</Select.Item>
))}
</Select.Viewport>
<Select.ScrollDownButton />
<Select.Arrow />
</Select.Content>
</Select.Portal>
</Select.Root>
)}
</Tabs.Content>
<Tabs.Content className="TabsContent" value="tab-sitemap">
{/*******
Sitemap Input tab Content
**********/}
<p className="Text">Sitemap URL</p>
<input
className="flex w-full rounded-md border border-gray-200 bg-white px-3 py-1 text-base shadow-sm transition-colors"
{...register(`sitemapUrl`, {
validate: (value) => {
return true;
}, // TODO conditional on current tab
})}
/>
<Separator.Root />
<button
type="button"
onClick={() =>
reset({
urls: [{ url: '' }],
})
}
>
reset
</button>
<input type="submit" />
</form>
</Tabs.Content>
<Tabs.Content className="TabsContent" value="tab-sitemap">
<p className="Text">Sitemap</p>
</Tabs.Content>
<Tabs.Content className="TabsContent" value="tab-csv">
<p className="Text">CSV</p>
</Tabs.Content>
</Tabs.Root>
<Separator.Root />
</Tabs.Content>
<Tabs.Content className="TabsContent" value="tab-csv">
{/*******
CSV Input tab Content
**********/}
<p className="Text">CSV</p>
</Tabs.Content>
</Tabs.Root>
<Separator.Root />

{/* <Button
{/* <Button
variant={'outline'}
className="w-fit"
onClick={() => navigate(-1)}
aria-label='Cancel adding pages'
>
Cancel
</Button> */}
<Separator.Root />
<Controller
name="property"
control={control}
render={({ field }) => (
<Select.Root value={field.value} onValueChange={field.onChange}>
<Select.Trigger
className="SelectTrigger"
aria-label="Add to Property"
>
<Select.Value placeholder="Select a Property…" />
<Select.Icon className="SelectIcon">
<ChevronDownIcon />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content className="SelectContent">
<Select.ScrollUpButton className="SelectScrollButton">
<ChevronUpIcon />
</Select.ScrollUpButton>
<Select.Viewport className="SelectViewport">
<Select.Item value="none" key="null">
<Select.ItemText>None</Select.ItemText>
</Select.Item>
{initialProperties.map((item, index) => (
<Select.Item value={item.id} key={index}>
<Select.ItemText>{item.name}</Select.ItemText>
</Select.Item>
))}
</Select.Viewport>
<Select.ScrollDownButton className="SelectScrollButton">
<ChevronDownIcon />
</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</Select.Root>
)}
/>
<Separator.Root />
<div className="flex flex-row items-center gap-2">
<input
type="submit"
value="Add Pages"
className="inline-flex items-center whitespace-nowrap rounded-md bg-[#005031] px-3 py-1 text-base text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#1D781D] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-3 max-sm:py-2.5"
/>
<button
type="button"
onClick={() =>
reset({
urls: [{ url: '' }],
})
}
>
reset
</button>
</div>
</form>
</section>
</>
);
Expand Down

0 comments on commit c10951a

Please sign in to comment.