Merge branch 'feat/setup-tailwind-shadcn' into mm-feature/update-listitem-singlelist-styling

Author: marshjaja

package-lock.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",
@@ -20,6 +21,7 @@
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-hot-toast": "^2.4.1",
+		"react-icon": "^1.0.0",
 		"react-icons": "^5.3.0",
 		"react-router-dom": "^6.26.0",
 		"tailwind-merge": "^2.5.2",

package.json

@@ -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({
@@ -30,7 +24,9 @@ export default function AddItemForm({ listPath, data, handleOpenModal }) {
 
 		const formattedItemName = formData.itemName
 			.toLowerCase()
-			.replace(/[^a-z]/g, '');
+			.replace(/^\s\s*/, '')
+			.replace(/\s\s*$/, '')
+			.replace(/[^a-zA-Z ]/g, '');
 
 		const match = data.find((item) => item.name === formattedItemName);
 
@@ -60,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,
@@ -90,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 className="bg-white">
-						<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">

src/components/ManageListForms/AddItemForm.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/dialog.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/components/ui/radio-group.jsx

@@ -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);
+}

src/index.css

@@ -23,8 +23,8 @@ export default {
 				'dark-grey': '#595959',
 				'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',