Merge pull request #50 from the-collab-lab/hm-add-item-radio-buttons

package.json

@@ -9,6 +9,7 @@
 	"dependencies": {
 		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-radio-group": "^1.2.1",
 		"@radix-ui/react-select": "^2.1.2",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.3",

src/components/ListItem.jsx

@@ -102,7 +102,7 @@ export function ListItem({
 							id={id}
 							onClick={() => setIsAlertOpen(true)}
 						>
-							<Trash2 className="text-main-green w-6 h-6 md:w-7 md:h-7" />
+							<Trash2 className="text-primary-green w-6 h-6 md:w-7 md:h-7" />
 						</Button>
 					</AlertDialogTrigger>
 					<AlertDialogContent>
@@ -117,7 +117,10 @@ export function ListItem({
 							<AlertDialogCancel onClick={() => setIsAlertOpen(false)}>
 								Cancel
 							</AlertDialogCancel>
-							<AlertDialogAction onClick={handleDelete}>
+							<AlertDialogAction
+								onClick={handleDelete}
+								className="bg-primary-pink text-white"
+							>
 								Continue
 							</AlertDialogAction>
 						</AlertDialogFooter>

src/components/ManageListForms/AddItemForm.jsx

@@ -3,13 +3,7 @@ import { addItem } from '../../api/firebase';
 import toast from 'react-hot-toast';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
-import {
-	Select,
-	SelectTrigger,
-	SelectContent,
-	SelectItem,
-	SelectValue,
-} from '../ui/select';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 
 export default function AddItemForm({ listPath, data, handleOpenModal }) {
 	const [formData, setFormData] = useState({
@@ -62,7 +56,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 		setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
 	};
 
-	const handleSelectChange = (value) => {
+	const handleRadioChange = (value) => {
 		setFormData((prevFormData) => ({
 			...prevFormData,
 			daysUntilNextPurchase: value,
@@ -92,16 +86,40 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 				<label htmlFor="daysUntilNextPurchase" className="text-md font-medium">
 					How soon would you like to buy this again?
 				</label>
-				<Select onValueChange={handleSelectChange}>
-					<SelectTrigger>
-						<SelectValue placeholder="Select Time" />
-					</SelectTrigger>
-					<SelectContent>
-						<SelectItem value="7">Soon (7 days)</SelectItem>
-						<SelectItem value="14">Kind of soon (14 days)</SelectItem>
-						<SelectItem value="30">Not soon (30 days)</SelectItem>
-					</SelectContent>
-				</Select>
+				<RadioGroup
+					onValueChange={handleRadioChange}
+					className="flex my-2 items-center justify-center gap-4"
+					id="daysUntilNextPurchase"
+				>
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+						<RadioGroupItem
+							value="7"
+							id="soon"
+							name="timeFrame"
+							className="border  border-soon text-soon"
+						/>
+						<label htmlFor="soon" className="font-semibold text-sm">
+							Soon
+						</label>
+					</div>
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+						<RadioGroupItem
+							value="14"
+							id="kind-of-soon"
+							name="timeFrame"
+							className="border border-kind-of-soon text-kind-of-soon"
+						/>
+						<label htmlFor="kind-of-soon" className="font-semibold text-sm">
+							Kind of soon
+						</label>
+					</div>
+					<div className="flex flex-col items-center justify-center rounded-xl border border-light-pink gap-4 w-28 h-28 shadow-bottom-right transition-transform duration-200 ease-in-out transform active:scale-95">
+						<RadioGroupItem value="30" id="not-of-soon" name="timeFrame" />
+						<label htmlFor="not of soon" className="font-semibold text-sm">
+							Not soon
+						</label>
+					</div>
+				</RadioGroup>
 			</div>
 			<div className="flex flex-col items-start gap-2 w-full">
 				<label htmlFor="quantity" className="text-md font-medium">
@@ -123,7 +141,7 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 			<div className="flex w-full">
 				<Button
 					type="submit"
-					className="bg-pink text-white rounded-xl w-full hover:bg-pink hover:bg-opacity-75 text-sm"
+					className="bg-primary-pink text-white rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-75 text-sm"
 				>
 					Add Item
 				</Button>

src/components/ui/dialog.jsx

@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef(
 			>
 				{children}
 				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
-					<X className="h-7 w-7 text-grey" />
+					<X className="h-7 w-7 text-light-grey" />
 				</DialogPrimitive.Close>
 			</DialogPrimitive.Content>
 		</DialogPortal>

src/components/ui/radio-group.jsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn('grid gap-2', className)}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				'aspect-square h-4 w-4 rounded-full border  border-primary-green text-primary-green ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-50 dark:text-slate-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="h-2.5 w-2.5 fill-current text-current" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

src/index.css

@@ -16,3 +16,7 @@ input[type='number'] {
 #root {
 	background-color: #201c24;
 }
+
+.shadow-bottom-right {
+	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
+}

tailwind.config.js

@@ -23,8 +23,8 @@ export default {
 				'dark-grey': '#7A7A7A',
 				'light-grey': '#A3A3A3',
 				'text-grey': '#B5B5B5',
-				soon: '#FFB74D',
-				'kind-of-soon': '#FEE720',
+				soon: '#FEE720',
+				'kind-of-soon': '#FFB74D',
 				'not-soon': '#81C784',
 				inactive: '#B0BEC5',
 				overdue: '#FF5252',