mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-25 20:27:44 +02:00
💄 Update select (#1813)
This commit is contained in:
parent
f5eb092d5d
commit
2889967726
6 changed files with 25 additions and 33 deletions
|
@ -1,7 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import languages, { supportedLngs } from "@rallly/languages";
|
import languages, { supportedLngs } from "@rallly/languages";
|
||||||
import { Button } from "@rallly/ui/button";
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
|
@ -41,10 +40,8 @@ const LanguageSelect = () => {
|
||||||
router.replace(`/${newLocale}${newPath}`);
|
router.replace(`/${newLocale}${newPath}`);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SelectTrigger asChild>
|
<SelectTrigger className="w-full">
|
||||||
<Button className="w-full">
|
<SelectValue />
|
||||||
<SelectValue />
|
|
||||||
</Button>
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{Object.entries(languages).map(([code, name]) => (
|
{Object.entries(languages).map(([code, name]) => (
|
||||||
|
|
|
@ -99,10 +99,8 @@ const DateTimePreferencesForm = () => {
|
||||||
field.onChange(Number.parseInt(value));
|
field.onChange(Number.parseInt(value));
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<SelectTrigger asChild>
|
<SelectTrigger>
|
||||||
<Button>
|
<SelectValue />
|
||||||
<SelectValue />
|
|
||||||
</Button>
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{dayjs.weekdays().map((day, index) => (
|
{dayjs.weekdays().map((day, index) => (
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { Button } from "@rallly/ui/button";
|
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
SelectContent,
|
SelectContent,
|
||||||
|
@ -62,10 +61,8 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
|
||||||
open={open}
|
open={open}
|
||||||
onOpenChange={setOpen}
|
onOpenChange={setOpen}
|
||||||
>
|
>
|
||||||
<SelectTrigger asChild>
|
<SelectTrigger className={className}>
|
||||||
<Button className={className}>
|
<SelectValue placeholder="Select time" />
|
||||||
<SelectValue placeholder="Select time" />
|
|
||||||
</Button>
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{open ? (
|
{open ? (
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import languages from "@rallly/languages";
|
import languages from "@rallly/languages";
|
||||||
import { Button } from "@rallly/ui/button";
|
|
||||||
import { Icon } from "@rallly/ui/icon";
|
import { Icon } from "@rallly/ui/icon";
|
||||||
import {
|
import {
|
||||||
Select,
|
Select,
|
||||||
|
@ -17,13 +16,11 @@ export const LanguageSelect: React.FunctionComponent<{
|
||||||
}> = ({ className, value, onChange }) => {
|
}> = ({ className, value, onChange }) => {
|
||||||
return (
|
return (
|
||||||
<Select value={value} onValueChange={onChange}>
|
<Select value={value} onValueChange={onChange}>
|
||||||
<SelectTrigger asChild className={className}>
|
<SelectTrigger className={className}>
|
||||||
<Button>
|
<Icon>
|
||||||
<Icon>
|
<LanguagesIcon />
|
||||||
<LanguagesIcon />
|
</Icon>
|
||||||
</Icon>
|
<SelectValue />
|
||||||
<SelectValue />
|
|
||||||
</Button>
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
{Object.entries(languages).map(([code, name]) => (
|
{Object.entries(languages).map(([code, name]) => (
|
||||||
|
|
|
@ -81,10 +81,8 @@ const MobilePoll: React.FunctionComponent = () => {
|
||||||
}}
|
}}
|
||||||
disabled={isEditing}
|
disabled={isEditing}
|
||||||
>
|
>
|
||||||
<SelectTrigger asChild className="w-full">
|
<SelectTrigger className="w-full">
|
||||||
<Button>
|
<SelectValue />
|
||||||
<SelectValue />
|
|
||||||
</Button>
|
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="all">
|
<SelectItem value="all">
|
||||||
|
|
|
@ -4,6 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
|
||||||
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
|
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
|
||||||
|
import { buttonVariants } from "./button";
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
import { cn } from "./lib/utils";
|
import { cn } from "./lib/utils";
|
||||||
|
|
||||||
|
@ -12,7 +13,7 @@ const Select = SelectPrimitive.Root;
|
||||||
const SelectGroup = SelectPrimitive.Group;
|
const SelectGroup = SelectPrimitive.Group;
|
||||||
|
|
||||||
const SelectValue = React.forwardRef<
|
const SelectValue = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Value>,
|
React.ComponentRef<typeof SelectPrimitive.Value>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
|
||||||
>(({ ...props }, ref) => {
|
>(({ ...props }, ref) => {
|
||||||
return (
|
return (
|
||||||
|
@ -27,17 +28,21 @@ const SelectValue = React.forwardRef<
|
||||||
SelectValue.displayName = SelectPrimitive.Value.displayName;
|
SelectValue.displayName = SelectPrimitive.Value.displayName;
|
||||||
|
|
||||||
const SelectTrigger = React.forwardRef<
|
const SelectTrigger = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
React.ComponentRef<typeof SelectPrimitive.Trigger>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
>(({ className, children, ...props }, ref) => (
|
>(({ className, children, ...props }, ref) => (
|
||||||
<SelectPrimitive.Trigger ref={ref} className={cn(className)} {...props}>
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(buttonVariants({ variant: "default" }), className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</SelectPrimitive.Trigger>
|
</SelectPrimitive.Trigger>
|
||||||
));
|
));
|
||||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
const SelectContent = React.forwardRef<
|
const SelectContent = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
React.ComponentRef<typeof SelectPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||||
<SelectPrimitive.Portal>
|
<SelectPrimitive.Portal>
|
||||||
|
@ -66,7 +71,7 @@ const SelectContent = React.forwardRef<
|
||||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||||
|
|
||||||
const SelectLabel = React.forwardRef<
|
const SelectLabel = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
React.ComponentRef<typeof SelectPrimitive.Label>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<SelectPrimitive.Label
|
<SelectPrimitive.Label
|
||||||
|
@ -81,7 +86,7 @@ const SelectLabel = React.forwardRef<
|
||||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||||
|
|
||||||
const SelectItem = React.forwardRef<
|
const SelectItem = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
React.ComponentRef<typeof SelectPrimitive.Item>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
>(({ className, children, ...props }, ref) => (
|
>(({ className, children, ...props }, ref) => (
|
||||||
<SelectPrimitive.Item
|
<SelectPrimitive.Item
|
||||||
|
@ -105,7 +110,7 @@ const SelectItem = React.forwardRef<
|
||||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||||
|
|
||||||
const SelectSeparator = React.forwardRef<
|
const SelectSeparator = React.forwardRef<
|
||||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
React.ComponentRef<typeof SelectPrimitive.Separator>,
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<SelectPrimitive.Separator
|
<SelectPrimitive.Separator
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue