Skip to content

Commit

Permalink
Merge branch 'feat/setup-tailwind-shadcn' into qg-feat-delete-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wyna-7
Wyna-7 committed Oct 12, 2024
2 parents 07e75a0 + 7eba74b commit ed975e4
Show file tree
Hide file tree
Showing 18 changed files with 374 additions and 175 deletions.
105 changes: 105 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
Binary file added public/img/light-pink-underline.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/img/ruby-underline.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 18 additions & 12 deletions src/components/CreateShoppingList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from 'react';
import { createList } from '../api/firebase';
import { useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
import { Input } from './ui/input';

export default function CreateShoppingList({ user, setListPath }) {
const [listName, setListName] = useState('');
Expand All @@ -23,27 +24,32 @@ export default function CreateShoppingList({ user, setListPath }) {
};

return (
<form onSubmit={handleSubmit} className="flex flex-row space-x-3 items-end">
<div className="flex flex-col">
<label htmlFor="shoppingList" className="text-xs font-extralight">
<form
onSubmit={handleSubmit}
className="relative w-full flex items-center justify-center gap-4 max-w-lg mx-auto "
>
<div className="flex flex-col w-full max-w-xs ">
<label htmlFor="shoppingList" className="text-sm font-light ">
Create a new list
</label>
<input
className="border-[1px] rounded-lg h-[3rem] focus-visible:outline-none focus:ring-1 focus:ring-green-500"
<Input
className="border-[1px] rounded-[5px] text-[1em] h-[3rem] pl-10 focus-visible:outline-none focus:ring-1 focus:ring-primary-green text-black dark:text-white bg-white dark:bg-bg-black"
id="shoppingList"
type="text"
value={listName}
onChange={(e) => setListName(e.target.value)}
required
/>
</div>

<button
type="submit"
className="bg-green-500 hover:bg-green-500 hover:bg-opacity-80 text-black font-bold h-[3rem] p-3 rounded-lg align-bottom"
>
Create +
</button>
<div className="flex pt-5">
<button
type="submit"
className="bg-light-green hover:bg-light-green dark:bg-primary-green dark:hover:bg-primary-green hover:bg-opacity-75 dark:hover:bg-opacity-75 text-black font-bold h-[3rem] px-5 rounded-[5px] flex items-center space-x-2"
>
<span>Create</span>
<span>+</span>
</button>
</div>
</form>
);
}
48 changes: 31 additions & 17 deletions src/components/ListItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,33 +66,39 @@ export function ListItem({
}, []);

return (
<li className="flex flex-row items-center justify-between rounded-[5px] text-[1em] space-x-5 w-full bg-white text-black h-[3.3rem]">
<div className="flex items-center gap-3 ml-4">
<li className="flex flex-row align-middle justify-between px-2 py-[4px] rounded-[3px] text-[0.9em] space-x-4 w-full bg-white dark:bg-[#2f3031] text-black dark:text-gray-200 shadow-md shadow-slate-400 dark:shadow-gray-600 border border-gray-300 dark:border-gray-500 sm:py-[8px] sm:rounded-[5px] sm:text-[1.2em] sm:space-x-8">
<div className="flex items-center gap-2 ml-2 sm:gap-3 sm:ml-4">
<input
type="checkbox"
id={id}
onChange={handleOnChange}
checked={isChecked}
disabled={isChecked}
className="w-5 h-5 cursor-pointer"
className="w-4 h-4 cursor-pointer sm:w-5 sm:h-5"
/>
<div
className={`flex items-center gap-2 ${isChecked ? 'line-through' : ''}`}
className={`flex items-center gap-1 ${isChecked ? 'line-through' : ''} sm:gap-2`}
>
<label
htmlFor={`${id}`}
className="capitalize justify-self-end text-lg"
className="capitalize text-sm hover:font-bold sm:text-lg"
>
{name}
</label>
</div>
<div className="bg-pink w-6 h-6 flex items-center justify-center rounded-full">
<span className="font-bold text-xs">{quantity}</span>
</div>
{quantity && (
<div className="bg-primary-pink text-black w-5 h-5 flex items-center justify-center rounded-full sm:w-6 sm:h-6">
<span className="font-bold text-xs">{quantity}</span>
</div>
)}
</div>
<div className="flex items-center gap-2">
<div className={`${getIndicatorColor(indicator)} rounded-[5px] px-3`}>
<p className="capitalize justify-self-end text-base">{indicator}</p>
<div className="flex items-center gap-1 sm:gap-2">
<div
className={`${getIndicatorColor(indicator)} rounded-[3px] px-2 sm:rounded-[5px] sm:px-3`}
>
<p className="capitalize text-xs sm:text-sm text-black dark:text-gray-800">
{indicator}
</p>
</div>
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
<AlertDialogTrigger asChild>
Expand All @@ -102,22 +108,30 @@ 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="w-5 h-5 text-ruby-pink hover:text-opacity-75 dark:text-emerald-500 dark:hover:text-opacity-80 sm:w-6 sm:h-6 md:w-7 md:h-7" />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogContent className="p-6 sm:p-10">
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
<AlertDialogTitle className="text-sm text-slate-500 dark:text-slate-400 sm:text-lg">
Are you absolutely sure?
</AlertDialogTitle>
<AlertDialogDescription className="text-black">
This action cannot be undone. Do you really want to delete{' '}
{name}?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel onClick={() => setIsAlertOpen(false)}>
<AlertDialogCancel
className="bg-white hover:bg-slate-100 px-6 border rounded-lg sm:px-8 sm:rounded-xl"
onClick={() => setIsAlertOpen(false)}
>
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={handleDelete}>
<AlertDialogAction
className="bg-primary-pink hover:bg-opacity-75 rounded-lg sm:rounded-xl"
onClick={handleDelete}
>
Continue
</AlertDialogAction>
</AlertDialogFooter>
Expand Down
60 changes: 40 additions & 20 deletions src/components/ManageListForms/AddItemForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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);

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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>
<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">
Expand All @@ -121,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-black rounded-xl w-full hover:bg-primary-pink hover:bg-opacity-80 text-sm p-6"
>
Add Item
</Button>
Expand Down
Loading

0 comments on commit ed975e4

Please sign in to comment.