Ejercicio API de perritos con su nombre y los tags de cada raza

nextjs/monstert-9886/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

nextjs/monstert-9886/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

nextjs/monstert-9886/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

nextjs/monstert-9886/components/src/App.css

@@ -0,0 +1,134 @@
+
+.Body {
+background-color: tomato;
+
+}
+
+.MainNavbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background-color: #f8f9fa;
+}
+
+.nav-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.nav-list li {
+  margin-left: 1rem;
+}
+
+.nav-list a {
+  text-decoration: none;
+  color: #333;
+  transition: color 0.3s;
+}
+
+.nav-list a:hover {
+  color: #007bff;
+}
+
+.PostCard {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.card img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.card-content {
+  padding: 1rem;
+}
+
+.card-content header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tag {
+  background-color: #40ff00;
+  color: #050000;
+  border-radius: 2px;
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.tag a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.heading {
+  margin: 0 0 0.5rem;
+}
+
+.card footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background-color: #f8f9fa;
+  border-top: 1px solid #e9ecef;
+}
+
+.author {
+  display: flex;
+  align-items: center;
+}
+
+.author img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.PostListContainer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  max-width: 900px;
+  margin: 0 auto;
+  padding-left: 10rem;
+}
+
+.card {
+  display: grid;
+  width: 100%;
+  max-width: 900px;
+  margin : 3rem; /* Añadir margen uniforme a las tarjetas */
+  justify-content: left;
+  transition: transform 0.3s, box-shadow 0.3s
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+
+.card:hover {
+  transform: translateY(-5px); /* Desplazar hacia arriba al pasar el mouse */
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumentar la sombra al pasar el mouse */
+}

nextjs/monstert-9886/components/src/App.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import './App.css';
+import MainNavbar from './MainNavbar.jsx';
+import FeaturedPosts from './FeaturedPosts.jsx';
+import PostListContainer from './PostListContainer.jsx';
+
+function App() {
+  const postCardsData = [
+    {
+      id: 1,
+      imgUrl: 'https://images.unsplash.com/photo-1634704784915-aacf363b021f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+      tags: ['Airdropss', 'Web3writing'],
+      date: '2022-01-24',
+      description: 'Airdrops? blockchains mas importantes para y como farmear...',
+      authorImgUrl: 'https://i.pravatar.cc/300',
+      authorName: 'TSAD',
+      readingTime: '7 min lectura'
+    },
+    {
+      id: 2,
+      imgUrl: 'https://images.unsplash.com/photo-1503642551022-c011aafb3c88?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
+      tags: ['Web3writing', 'Copywriting'],
+      date: '2023-01-24',
+      description: 'Como comenzar una carrera como escritor sobre temas de web3 ?...',
+      authorImgUrl: 'https://i.pravatar.cc/300',
+      authorName: 'TSAD',
+      readingTime: '7 min lectura'
+    }
+  ];
+
+  return (
+    <div className="App">
+      <MainNavbar />
+      <FeaturedPosts />
+      <PostListContainer postCardsData={postCardsData} />
+    </div>
+  );
+}
+
+export default App;

nextjs/monstert-9886/components/src/Body.jsx

@@ -0,0 +1,19 @@
+// src/Body.jsx
+import React, { Fragment } from 'react';
+import MainNavbar from './MainNavbar';
+import FeaturedPosts from './FeaturedPosts';
+import PostListContainer from './PostListContainer';
+
+function Body() {
+  return (
+    <Fragment>
+      <MainNavbar />
+      <main>
+        <FeaturedPosts />
+        <PostListContainer />
+      </main>
+    </Fragment>
+  );
+}
+
+export default Body;

nextjs/monstert-9886/components/src/DogCard.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function DogCard({ breed, image }) {
+  return (
+    <article className="card">
+      <img src={image} alt={`Imagen de ${breed}`} />
+      <section>
+        <div className="card-content">
+          <header>
+            <h2 className="heading heading-sm font-bold">{breed}</h2>
+          </header>
+        </div>
+      </section>
+    </article>
+  );
+}

nextjs/monstert-9886/components/src/FeaturedPosts.jsx

@@ -0,0 +1,16 @@
+// src/FeaturedPosts.js
+import React from 'react';
+
+const FeaturedPosts = () => {
+  return (
+    <section className="featured-posts">
+      <article></article>
+      <div className="button-container">
+        <button>Atras</button>
+        <button>Adelante</button>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturedPosts;

nextjs/monstert-9886/components/src/MainNavbar.jsx

@@ -0,0 +1,20 @@
+// src/MainNavbar.jsx
+import React from 'react';
+
+function MainNavbar() {
+  return (
+    <header className="main-navbar">
+      <img src="" alt="" />
+      <nav>
+        <ul className="nav-list">
+          <li><a href="#" className="text-button text-button-md font-bold is-active">Inicio</a></li>
+          <li><a href="#" className="text-button text-button-md font-bold">Suscribirse</a></li>
+          <li><a className="text-button text-button-md font-bold">Twitter</a></li>
+          <li><a className="text-button text-button-md font-bold">GumRoad</a></li>
+        </ul>
+      </nav>
+    </header>
+  );
+}
+
+export default MainNavbar;

nextjs/monstert-9886/components/src/PostCard.jsx

@@ -0,0 +1,39 @@
+// src/PostCard.jsx
+import React, { Fragment } from 'react';
+
+function PostCard({ imgUrl, tags, date, description, authorImgUrl, authorName, readingTime }) {
+  return (
+    <Fragment>
+      <article className="card">
+        <img src={imgUrl} alt="Imagen de un post" />
+        <section>
+          <div className="card-content">
+            <header>
+              <div className="tags">
+                {tags.map((tag, index) => (
+                  <span key={index} className="tag tag-primary"><a href="#">{tag}</a></span>
+                ))}
+              </div>
+              <h2 className="heading heading-sm font-bold"></h2>
+              <time className="help-text paragraph paragraph-xs font-regular" dateTime={date}>
+                {date}
+              </time>
+            </header>
+            <p className="paragraph paragraph-sm font-regular">{description}</p>
+          </div>
+          <footer>
+            <div className="author">
+              <img src={authorImgUrl} alt="Avatar de un autor" />
+              <span className="paragraph paragraph-xs font-bold">{authorName}</span>
+            </div>
+            <span className="help-text paragraph paragraph-xs font-regular">
+              {readingTime}
+            </span>
+          </footer>
+        </section>
+      </article>
+    </Fragment>
+  );
+}
+
+export default PostCard;

nextjs/monstert-9886/components/src/PostListContainer.jsx

@@ -0,0 +1,27 @@
+import React, { Fragment } from 'react';
+import PostCard from './PostCard.jsx';
+
+function PostListContainer({ postCardsData }) {
+  return (
+    <Fragment>
+      <section className="post-list-container">
+        <div className="post-card-container">
+          {postCardsData.map((post, index) => (
+            <PostCard
+              key={post.id}
+              imgUrl={post.imgUrl}
+              tags={post.tags}
+              date={post.date}
+              description={post.description}
+              authorImgUrl={post.authorImgUrl}
+              authorName={post.authorName}
+              readingTime={post.readingTime}
+            />
+          ))}
+        </div>
+      </section>
+    </Fragment>
+  );
+}
+
+export default PostListContainer;