Merge pull request #7 from SteveMoya/css-grid

Css grid
doneber · Mar 21, 2024 · 1943e1f · 1943e1f
2 parents 4eadab8 + 5b1cf85
commit 1943e1f
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 71 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,36 +1,39 @@
 {
-    "explorer.fileNesting.expand": false,
-    "explorer.fileNesting.patterns": {
-      "package.json": "pnpm-lock.yaml, package-lock.json, yarn.lock",
-      ".prettierrc.mjs": ".prettierignore",
-      "README.md": "CONTRIBUTING.md"
-    },
-    "editor.linkedEditing": true,
-    "editor.codeActionsOnSave": {
-      "source.organizeImports": "explicit"
-    },
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "files.associations": {
-      "*.svg": "html"
-    },
-    "eslint.validate": [
-      "javascript",
-      "javascriptreact",
-      "astro",
-      "typescript",
-      "typescriptreact"
-    ],
-    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
-    "typescript.format.insertSpaceBeforeFunctionParenthesis": false,
-    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
-    "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
-    "editor.insertSpaces": false,
-    "editor.detectIndentation": false,
-    "[astro]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "prettier.documentSelectors": [
-      "**/*.astro"
-    ]
-  }
+	"explorer.fileNesting.expand": false,
+	"explorer.fileNesting.patterns": {
+		"package.json": "pnpm-lock.yaml, package-lock.json, yarn.lock",
+		".prettierrc.mjs": ".prettierignore",
+		"README.md": "CONTRIBUTING.md"
+	},
+	"editor.linkedEditing": true,
+	"editor.codeActionsOnSave": {
+		"source.organizeImports": "explicit"
+	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"editor.formatOnSave": true,
+	"files.associations": {
+		"*.svg": "html"
+	},
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"astro",
+		"typescript",
+		"typescriptreact"
+	],
+	"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
+	"typescript.format.insertSpaceBeforeFunctionParenthesis": false,
+	"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
+	"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
+	"editor.insertSpaces": false,
+	"editor.detectIndentation": false,
+	"[astro]": {
+		"editor.defaultFormatter": "astro-build.astro-vscode"
+	},
+	"prettier.documentSelectors": [
+		"**/*.astro"
+	],
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "vscode.typescript-language-features"
+	}
+}
diff --git a/public/resources.csv b/public/resources.csv
@@ -38,4 +38,5 @@ https://excalidraw.com/, #draw #whiteboard #collaboration
 https://www.figma.com/, #design #collaboration
 https://www.sketch.com/, #design #collaboration
 https://app.diagrams.net/, #diagrams #collaboration
-https://pkg-size.dev/, #package-size #analyzer
+https://pkg-size.dev/, #package-size #analyzer
+https://heropatterns.com/, #background #patterns #svg
diff --git a/src/components/ResourcesListContainer.tsx b/src/components/ResourcesListContainer.tsx
@@ -14,14 +14,15 @@ export const ResourcesContainer = () => {
 	}, [])
 
   return (
-    <ul role="list" class="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+    <ul role="list" class="grid grid-cols-1 gap-3 ">
       {resources.map((resource) => (
         <Card
           href={resource.url}
           title={resource.title}
           description={resource.description}
-          // imageUrl={resource.imageUrl}
+          imageUrl={resource.imageUrl}
           hashtags={resource.hashtags}
+
         />
       ))}
     </ul>

diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
@@ -2,19 +2,19 @@ import { useState } from "preact/hooks"
 import { useBookmark } from "../../hooks/useBookmark"
 
 interface Props {
-  title: string
-  description: string
-  href: string
-  imageUrl?: string | undefined
-  hashtags: string[]
+	title: string
+	description: string
+	href: string
+	imageUrl?: string | undefined
+	hashtags: string[]
 }
 
 export const Card = ({ href, title, description, imageUrl, hashtags }: Props) => {
 	const { getBookmarks, addBookmark } = useBookmark()
 
 	const checkMark = () => getBookmarks()
-	.some(bookmark =>
-		bookmark.url === href // resource.url es como una ID
+		.some(bookmark =>
+			bookmark.url === href // resource.url es como una ID
 		)
 	const [isMarked, setIsMarked] = useState<boolean>(checkMark())
 
@@ -24,37 +24,57 @@ export const Card = ({ href, title, description, imageUrl, hashtags }: Props) =>
 		setIsMarked(checkMark())
 	}
 
-  return (
-    <li className="overflow-hidden rounded border-[1px] border-[solid] border-neutral-700 hover:bg-neutral-800 hover:bg-[0] dark:hover:bg-neutral-100 dark:border-neutral-200">
-      <a href={href} target="_blank" rel="noopener noreferrer nofollow" className="flex h-full flex-col md:flex-row">
-        <div class="flex w-full h-full flex-col p-4">
-          <h2 className="min-h-4 truncate text-base">{title}</h2>
-          <p class="mt-2 text-sm text-neutral-400 dark:text-neutral-800 overflow-hidden"
-							style="
+	return (
+		<li className="overflow-hidden rounded border-[1px] border-[solid] border-neutral-700 hover:bg-neutral-800 hover:bg-[0] dark:hover:bg-neutral-100 dark:border-neutral-200 ">
+			<a href={href} target="_blank" className="flex h-full flex-col md:flex-row order-1 w-full">
+				<div className="flex w-full h-full flex-col p-4">
+					<h2 className="min-h-4 truncate">{title}</h2>
+					<p className="mt-2 text-sm text-neutral-400 dark:text-neutral-800 overflow-hidden"
+						style="
 								display: -webkit-box;
 								-webkit-box-orient: vertical;
 								-webkit-line-clamp: 2;
 								text-overflow: ellipsis;
 							"
 					>{description}</p>
-          <ul className="mx-0 my-2 flex flex-wrap gap-1 p-0">
-            {hashtags.map((hashtag) => (
-              <li className="rounded-lg border-[1px] border-[solid] border-neutral-800 px-[6px] pb-[2px] pt-[1px] text-sm">{hashtag}</li>
-            ))}
-          </ul>
-          <p class="mt-auto truncate text-sm">{href}</p>
-					<button className={`mt-2 w-fit ${!isMarked && "cursor-cell"}`} onClick={handleBookmark}>
+					<ul className="mx-0 my-2 flex flex-wrap gap-1 p-0">
+						{hashtags.map((hashtag) => (
+							<li className="rounded-lg border-[1px] border-[solid] border-neutral-800 px-[6px] pb-[2px] pt-[1px] text-sm">{hashtag}</li>
+						))}
+					</ul>
+					<p className="mt-auto truncate text-sm">{href}</p>
+					<button className="mt-2 w-fit" onClick={handleBookmark}>
 						<svg
-							className={`${isMarked && "fill-neutral-200 dark:fill-neutral-950"} hover:fill-transparent`}
-							width="1.2em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 6.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C6.52 3 7.08 3 8.2 3h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C19 4.52 19 5.08 19 6.2V21l-7-5-7 5V6.2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
+							className={`hover:fill-neutral-200 ${isMarked ? "fill-neutral-200 dark:fill-neutral-950" : ""}`}
+							width="1.2em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 6.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C6.52 3 7.08 3 8.2 3h7.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C19 4.52 19 5.08 19 6.2V21l-7-5-7 5V6.2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
 						</svg>
 					</button>
-        </div>
-        {/* TODO: is la imagen da error, no mostrar */}
-        {imageUrl && (<div className="w-[32rem] hidden md:block max-h-44">
-					<img loading="lazy" className="w-full h-full object-cover" src={imageUrl} alt={`Imagen de ${title}`}/>
-				</div>)}
-      </a>
-    </li>
-  )
+				</div>
+				{/* TODO: is la imagen da error, no mostrar */}
+				{imageUrl && (
+					<div className="group relative transition-all  ">
+						<a
+							className="group rounded-xl hover:scale-105 hover:contrast-[110%] transition-all relative"
+							href={href}
+							target="_blank"
+							data-cropped="true"
+						>
+							<img
+								className=" rounded-lg object-cover md:aspect-square group-hover:contrast-100 transition-all max-sm:aspect-video sm:w-[300px] md:w-[270px]"
+								loading="lazy"
+								src={imageUrl}
+								alt={`Imagen de ${title}`}
+							/>
+							<img
+								className="blur-md opacity-45 group-hover:opacity-90 absolute inset-0 transition-all contrast-150 -z-10 object-cover md:aspect-square sm:w-[300px] rounded-lg max-sm:aspect-video md:w-[270px]"
+								loading="lazy"
+								src={imageUrl}
+								alt={`Imagen de ${title}`}
+							/>
+						</a>
+					</div>
+				)}
+			</a>
+		</li>
+	)
 }
diff --git a/src/components/searcher/SearchResults.tsx b/src/components/searcher/SearchResults.tsx
@@ -16,7 +16,7 @@ export const SearchResults = () => {
 
     <div>
       <h4 className="my-5 text-base">Resultados:</h4>
-      <ul className="flex flex-col gap-4 p-0 my-4">
+		  <ul className="grid grid-cols-1  gap-y-10 gap-x-6 items-start">
         {
           results.length === 0 ? <p>No se encontraron coincidencias</p> : results.map((resource) => (
             <Card

diff --git a/src/mocks/resources.json b/src/mocks/resources.json
@@ -185,4 +185,4 @@
 			"imageUrl": "/og-image.png"
 		}
 	]
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -185,4 +185,4 @@ @@
     			"imageUrl": "/og-image.png"
     		}
     	]
-    }
+    }