Merge pull request #28 from rolling-scopes/feature/issue-11

Feature/ Add DonationV1 DonationV2 Community Speakers

README.md

@@ -65,13 +65,13 @@ Then set these variables in `.env.local`:
 - `NEXT_PUBLIC_SANITY_PROJECT_ID` should be the `projectId` value from [`sanity.json`].
 - `NEXT_PUBLIC_SANITY_DATASET` should be the `dataset` value from [`sanity.json`].
 - `SANITY_API_READ_TOKEN` create an API token with `read-only` permissions:
-    - Run this to open your project settings or go to https://manage.sanity.io/ and open your project:
-      ```bash
-      (cd studio && npx @sanity/cli manage)
-      ```
-    - Go to **API** and the **Tokens** section at the bottom, launch its **Add API token** button.
-    - Name it `SANITY_API_READ_TOKEN`, set **Permissions** to `Viewer`.
-    - Hit **Save** and you can copy/paste the token.
+  - Run this to open your project settings or go to https://manage.sanity.io/ and open your project:
+    ```bash
+    (cd studio && npx @sanity/cli manage)
+    ```
+  - Go to **API** and the **Tokens** section at the bottom, launch its **Add API token** button.
+  - Name it `SANITY_API_READ_TOKEN`, set **Permissions** to `Viewer`.
+  - Hit **Save** and you can copy/paste the token.
 
 Your `.env.local` file should look like this:
 

components/Community/community.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+import { urlForImage } from '@/lib/sanity';
+import { CommunityT } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  community: CommunityT;
+};
+
+export default function Community({ community }: Props) {
+  const { picture, title, description } = community || {};
+  const imageUrl = picture?.asset?._ref
+    ? urlForImage(picture).url()
+    : 'https://source.unsplash.com/630x441/';
+  return (
+    <section>
+      <div className={styles.block}>
+        <div className={styles.content}>
+          <div className={styles.image}>
+            <Image src={imageUrl} layout="fill" alt="community" />
+          </div>
+
+          <div className={styles.right}>
+            <h1 className={styles.title}>{title}</h1>
+            <p
+              dangerouslySetInnerHTML={{ __html: description }}
+              className={styles.description}
+            ></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/Community/index.ts

@@ -0,0 +1,3 @@
+import Community from './community';
+
+export default Community;

components/Community/styles.module.scss

@@ -0,0 +1,35 @@
+.block {
+  @apply container px-20 py-20 mx-auto;
+}
+
+.content {
+  @apply lg:-mx-6 lg:flex;
+}
+
+.right {
+  @apply lg:w-1/2;
+}
+
+.title {
+  @apply text-3xl font-bold;
+  color: #1a1a1a;
+}
+
+.description {
+  @apply mt-3 text-sm md:text-sm;
+  color: #1a1a1a;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 text-white mt-6;
+  background-color: #191b1d;
+}
+
+.image {
+  @apply w-full h-72 lg:h-80 lg:mr-32 lg:w-1/2;
+  position: relative;
+
+  & > span > img {
+    @apply object-cover;
+  }
+}

components/DonationV1/donation-v1.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { DonationV1T } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  donation: DonationV1T;
+};
+
+export default function DonationV1({ donation }: Props) {
+  const { title, description, link, titleLink } = donation || {};
+  return (
+    <section className={styles.block}>
+      <div className={styles.container}>
+        <h1 className={styles.title}>{title}</h1>
+        <span className={styles.description}>{description}</span>
+        <Link href={link ?? ''}>
+          <a className={styles.link}>{titleLink}</a>
+        </Link>
+      </div>
+    </section>
+  );
+}

components/DonationV1/index.ts

@@ -0,0 +1,3 @@
+import DonationV1 from './donation-v1';
+
+export default DonationV1;

components/DonationV1/styles.module.scss

@@ -0,0 +1,21 @@
+.block {
+  @apply flex flex-col justify-center h-80 text-center px-8 dark:text-white;
+  background-color: #191b1d;
+}
+
+.container {
+  @apply flex flex-col justify-center items-center mx-auto md:max-w-[50%];
+}
+
+.title {
+  @apply text-slate-900 text-4xl tracking-tight font-extrabold sm:text-5xl dark:text-white;
+}
+
+.description {
+  @apply mt-6 text-base;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 bg-white mt-6 ml-8;
+  color: #191b1d;
+}

components/DonationV2/donation-v2.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { urlForImage } from '@/lib/sanity';
+import { DonationV2T } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  donation: DonationV2T;
+};
+
+export default function DonationV2({ donation }: Props) {
+  const { picture, title, description, link, titleLink } = donation || {};
+  const imageUrl = picture?.asset?._ref
+    ? urlForImage(picture).url()
+    : 'https://source.unsplash.com/630x441/';
+  return (
+    <section>
+      <div className={styles.block}>
+        <h1 className={styles.title}>{title}</h1>
+
+        <div className={styles.content}>
+          <div className={styles.image}>
+            <Image src={imageUrl} layout="fill" alt="donation" />
+          </div>
+
+          <div className={styles.right}>
+            <p className={styles.description}>{description}</p>
+
+            <Link href={link ?? ''}>
+              <a className={styles.link}>{titleLink}</a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/DonationV2/index.ts

@@ -0,0 +1,3 @@
+import DonationV2 from './donation-v2';
+
+export default DonationV2;

components/DonationV2/styles.module.scss

@@ -0,0 +1,35 @@
+.block {
+  @apply container px-6 py-10 mx-auto;
+}
+
+.content {
+  @apply mt-8 lg:-mx-6 lg:flex lg:items-center;
+}
+
+.right {
+  @apply mt-6 lg:w-1/2 lg:mt-auto;
+}
+
+.title {
+  @apply text-3xl font-bold;
+  color: #1a1a1a;
+}
+
+.description {
+  @apply mt-3 text-sm md:text-sm;
+  color: #1a1a1a;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 text-white mt-6;
+  background-color: #191b1d;
+}
+
+.image {
+  @apply w-full h-72 lg:h-96 lg:mx-6 lg:w-1/2;
+  position: relative;
+
+  & > span > img {
+    @apply object-cover;
+  }
+}

components/Footer/footer.tsx

@@ -1,6 +1,3 @@
 export default function Footer() {
-  return (
-    <footer className="bg-accent-1 border-t border-accent-2">
-    </footer>
-  );
+  return <footer className="bg-accent-1 border-t border-accent-2"></footer>;
 }

components/Speakers/index.ts

@@ -0,0 +1,3 @@
+import Speakers from './speakers';
+
+export default Speakers;

components/Speakers/speakers.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link';
+import { SpeakersT } from 'types';
+import styles from './styles.module.scss';
+
+type Props = {
+  speaker: SpeakersT;
+};
+
+export default function Speakers({ speaker }: Props) {
+  const { title, description, link, titleLink } = speaker || {};
+  return (
+    <section className={styles.block}>
+      <div className={styles.container}>
+        <h1 className={styles.title}>{title}</h1>
+        <span className={styles.description}>{description}</span>
+        <Link href={link ?? ''}>
+          <a className={styles.link}>{titleLink}</a>
+        </Link>
+      </div>
+    </section>
+  );
+}

components/Speakers/styles.module.scss

@@ -0,0 +1,21 @@
+.block {
+  @apply flex flex-col justify-center h-80 text-center px-8 dark:text-white;
+  background-color: #191b1d;
+}
+
+.container {
+  @apply flex flex-col justify-center items-center mx-auto md:max-w-[50%];
+}
+
+.title {
+  @apply text-slate-900 text-4xl tracking-tight font-extrabold sm:text-5xl dark:text-white;
+}
+
+.description {
+  @apply mt-6 text-base;
+}
+
+.link {
+  @apply inline-flex justify-center text-sm font-semibold py-2.5 px-4 bg-white mt-6 ml-8;
+  color: #191b1d;
+}

lib/queries/community.js

@@ -0,0 +1,12 @@
+import { groq } from 'next-sanity';
+
+const communityItem = `
+_id,
+title,
+description,
+picture
+`;
+
+export const communityQuery = groq`*[_type == "community"][]{${communityItem}}`;
+
+export default communityQuery;

lib/queries/donation-v1.js

@@ -0,0 +1,13 @@
+import { groq } from 'next-sanity';
+
+const donationItem = `
+_id,
+title,
+description,
+titleLink,
+link
+`;
+
+export const donationV1Query = groq`*[_type == "donation-v1"][]{${donationItem}}`;
+
+export default donationV1Query;

lib/queries/donation-v2.js

@@ -0,0 +1,14 @@
+import { groq } from 'next-sanity';
+
+const donationItem = `
+_id,
+title,
+description,
+titleLink,
+link,
+picture
+`;
+
+export const donationV2Query = groq`*[_type == "donation-v2"][]{${donationItem}}`;
+
+export default donationV2Query;

lib/queries/index.js

@@ -0,0 +1,15 @@
+import community from './community';
+import donationV1 from './donation-v1';
+import donationV2 from './donation-v2';
+import speakers from './speakers';
+import socialNetworksList from './social-network';
+
+const queries = {
+  community,
+  donationV1,
+  donationV2,
+  socialNetworksList,
+  speakers
+};
+
+export default queries;

lib/queries/social-network.js

@@ -8,4 +8,4 @@ social_item_link
 
 export const socialNetworksListQuery = groq`*[_type == "social_link"][]{${socialItem}}`;
 
-export const test = 'test';
+export default socialNetworksListQuery;

lib/queries/speakers.js

@@ -0,0 +1,13 @@
+import { groq } from 'next-sanity';
+
+const speakersItem = `
+_id,
+title,
+description,
+titleLink,
+link
+`;
+
+export const speakersQuery = groq`*[_type == "speakers"][]{${speakersItem}}`;
+
+export default speakersQuery;