Skip to content

New idea screen #6 #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ilialtes merged 4 commits into from
Feb 24, 2025
Merged

New idea screen #6 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7abc9fc
ADD: new-idea-screen
chiscookeke11 Feb 21, 2025
f974aa0
Fix: new idea screen
chiscookeke11 Feb 21, 2025
0392656
Created a constant.ts file
chiscookeke11 Feb 24, 2025
83f2311
Merge branch 'Chonete-Builders:main' into new-idea-screen
chiscookeke11 Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CryptoHackAI-web/public/Image.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions CryptoHackAI-web/src/app/components/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';

interface CardProps {
content: string;
title: string;
className: string;
contentStyle: string;
}

const Card: React.FC<CardProps> = ({
content,
title,
className,
contentStyle,
}) => {
return (
<div
className={`bg-[#F5F5F5] w-full rounded-[50px] flex flex-col items-start justify-center p-5 ${className} `}
>
<h2 className="text-[#2C2C2C] text-base font-semibold ml-5">{title} </h2>

<div
className={`bg-white p-4 border-[1px] border-[#D9D9D9] rounded-[10px] overflow-y-auto scrollbar-hide ${contentStyle} `}
>
<p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
{content}
</p>
</div>
</div>
);
};

export default Card;
7 changes: 7 additions & 0 deletions CryptoHackAI-web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,10 @@ body {
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
73 changes: 73 additions & 0 deletions CryptoHackAI-web/src/app/new-idea/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
'use client';

import Image from 'next/image';
import NEW_IDEA from '../utils/constants';
import Card from '../components/Card';

const img = '/image.svg';

const Page = () => {
return (
<div className="w-full min-h-screen flex flex-col items-center justify-start gap-8 p-5 bg-[#B4AB9A]">
<div className="w-full max-w-[1057px] min-h-[285px] bg-[#F5F5F5] rounded-[50px] py-5 pr-[4%] pl-[10%] flex-col md:flex-row flex items-center justify-start md:justify-start gap-4 md:gap-[10%] ">
<h1 className="text-[#2C2C2C] font-bold text-5xl">{NEW_IDEA.name}</h1>

<div className="flex flex-col items-start justify-center ">
<Image
src={img}
alt="image"
height={100}
width={100}
className="object-contain"
/>
<p>
AI Generated
<br /> Image
</p>
</div>

<div className="flex flex-row md:flex-col items-center justify-center gap-7 md:ml-auto">
<button
onClick={() => console.log('Share Clicked')}
className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
>
Share
</button>
<button
onClick={() => console.log('Delete Clicked')}
className="bg-[#2C2C2C] text-white w-[108px] h-[32px] rounded-[8px]"
>
Delete
</button>
</div>
</div>

<div className="w-full max-w-[1057px] flex-col md:flex-row gap-4 flex items-center justify-between p-1">
Copy link
Contributor

@Ilialtes Ilialtes Feb 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Create a reusable section card instead of repeating the code for the description, impact and uniqueness

import React from 'react';

const SectionCard = ({ title, content }) => {
  return (
    <div className="bg-[#F5F5F5] w-full rounded-[50px] p-4 flex flex-col gap-2">
      <h2 className="text-[#2C2C2C] text-base font-semibold ml-5">{title}</h2>
      <div className="bg-white p-4 border border-[#D9D9D9] rounded-[10px] overflow-y-auto scrollbar-hide">
        <p className="text-[#1E1E1E] font-normal text-base leading-[22.4px] whitespace-pre-line">
          {content}
        </p>
      </div>
    </div>
  );
};

export default SectionCard;

<Card
title="Description"
content={NEW_IDEA.description}
className="max-w-[638px] h-[594px] gap-5 "
contentStyle="h-[473px]"
/>

<div className="w-full flex flex-col items-center justify-between gap-8 max-w-[375px] h-full">
<Card
title="Impact"
content={NEW_IDEA.impact}
className="max-w-[372px] h-[252px] gap-2 "
contentStyle=" h-[153px] "
/>

<Card
title="Uniqueness"
content={NEW_IDEA.uniqueness}
className="max-w-[372px] h-[327px] gap-2 "
contentStyle=" h-[216px] "
/>
</div>
</div>
</div>
);
};

export default Page;
12 changes: 12 additions & 0 deletions CryptoHackAI-web/src/app/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@



const NEW_IDEA = {
name: "Idea Name",
image: "",
description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
impact: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the ���1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
uniqueness: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
}

export default NEW_IDEA;